shopify 屬性新增圖片及樣式
<style>
.custom-sax{ float:left; width:100%;}
.custom-sax li{ float:left; width:23%; padding-left:5px;}
.custom-sax li input{ display:none;}
.hq_hy:hover{border:2px solid red;}
.start{cursor: pointer;}
.end { border:2px solid #000;}
</style>
<script type="text/javascript">
$(function () {
var collection = $(".flag");
$.each(collection, function () {
$(this).addClass("start");
});
});
function dj(dom) {
var collection = $(".flag");
$.each(collection, function () {
$(this).removeClass("end");
$(this).addClass("start");
});
$(dom).removeClass("start");
$(dom).addClass("end");
}
</script>
<div class="custom-sax">
<p class="line-item-property__field">
<label>Eye Color</label><br>
<li>
<input required class="required" type="radio" name="properties[Eye Color]" value="Default" checked id="Default">
<label for="Default" class="flag hq_hy" onclick="dj(this);"><img class="tmlazy radio_image" alt="Default" src="https://www.sexdollie.com/wp-content/uploads/2018/09/same-as-pic-100x100.jpg"></label><br>
<span>Default</span>
</li>
<li>
<input required class="required" type="radio" name="properties[Eye Color]" value="Brown" id="Brown">
<label for="Brown" class="flag hq_hy" onclick="dj(this);"><img class="tmlazy radio_image" alt="Default" src="https://www.sexdollie.com/wp-content/uploads/2018/08/option-eye-brown.jpg"></label><br>
<span>Brown</span>
</li>
<li>
<input required class="required" type="radio" name="properties[Eye Color]" value="Blue" id="Blue">
<label for="Blue" class="flag hq_hy" onclick="dj(this);"><img class="tmlazy radio_image" alt="Default" src="https://www.sexdollie.com/wp-content/uploads/2018/08/option-eye-blue.jpg"></label><br>
<span>Blue</span>
</li>
<li>
<input required class="required" type="radio" name="properties[Eye Color]" value="Green" id="Green">
<label for="Green" class="flag hq_hy" onclick="dj(this);"><img class="tmlazy radio_image" alt="Default" src="https://www.sexdollie.com/wp-content/uploads/2018/08/option-eye-green.jpg"></label><br>
<span>Green</span><br>
</li>
</p>
相關文章
- [譯] 給破碎圖片新增樣式
- Wordpress自動給圖片新增alt和title屬性
- css字型樣式屬性CSS
- Java後臺Html轉圖片和獲取頁面屬性值,及圖片拼接JavaHTML
- Android 樣式屬性的使用Android
- 織夢kindeditor編輯器圖片上傳增加圖片alt屬性和title屬性的方法
- GD 庫 PNG 透明底圖片新增文字及圖片水印
- bootstrap的圖片自適應屬性boot
- After Effects 圖層屬性及屬性組結構詳解
- 非佈局樣式-裝飾性屬性&CSS hackCSS
- CSS 設定<img>圖片樣式CSS
- CSS——CSS 給文字加樣式:① 字型屬性CSS
- CSS——CSS 給文字加樣式:② 文字屬性CSS
- WPF往RichTextBox新增圖片及調整行距
- 圖形驗證碼圖片樣式設定
- CSS3製作圖片樣式CSSS3
- css樣式相關的驚豔的屬性CSS
- 技巧分享:如何利用CSS屬性修改圖片顏色?CSS
- 如何自動地向知識圖譜中新增屬性?
- 批次圖片新增水印
- CSS內聯樣式的使用,設定字型屬性CSS
- class屬性的新增刪除
- 給Product新增自定義屬性
- ubuntu下OpenLDAP新增自定義屬性UbuntuLDA
- Android property屬性許可權新增Android
- css3新增哪些背景屬性CSSS3
- 搜尋框設定背景圖 通過設定placeholder屬性新增
- 手撕Vue-Router-新增全域性$router屬性Vue
- Zepto這樣操作元素屬性
- jQuery知識總結之元素屬性與樣式的操作jQuery
- js設定頁面TR 的屬性 背景顏色 樣式JS
- 圖片上傳及圖片處理
- Python 動態新增例項屬性,例項方法,類屬性,類方法Python
- 美圖秀秀怎麼給圖片新增背景?美圖秀秀給圖片新增背景的教程
- 盒子屬性,及浮動
- 用HMS Core地圖服務自定義地圖樣式,給你的應用製作專屬個性化地圖地圖
- 為 protocol 中屬性新增預設值Protocol
- html5/css3新增屬性HTMLCSSS3