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
- addClass()新增多個樣式屬性程式碼例項
- css字型樣式屬性CSS
- Shell指令碼的顏色樣式及屬性控制指令碼
- (中級)快捷樣式屬性
- Java後臺Html轉圖片和獲取頁面屬性值,及圖片拼接JavaHTML
- html5新增及廢除屬性HTML
- Android 樣式屬性的使用Android
- CSS常見樣式和屬性CSS
- 行內樣式新增多個style屬性,只會載入第一個style裡面的樣式
- GD 庫 PNG 透明底圖片新增文字及圖片水印
- 織夢kindeditor編輯器圖片上傳增加圖片alt屬性和title屬性的方法
- bootstrap的圖片自適應屬性boot
- rcp新增屬性
- CSScursor屬性改變滑鼠的樣式CSS
- After Effects 圖層屬性及屬性組結構詳解
- CSS 設定<img>圖片樣式CSS
- 非佈局樣式-裝飾性屬性&CSS hackCSS
- CSS——CSS 給文字加樣式:① 字型屬性CSS
- CSS——CSS 給文字加樣式:② 文字屬性CSS
- jQuery—頁面內容,樣式,控制屬性jQuery
- 圖形驗證碼圖片樣式設定
- CSS3製作圖片樣式CSSS3
- css樣式相關的驚豔的屬性CSS
- 為textarea新增maxlength屬性
- 正規表示式從<img>標籤中提取src屬性值圖片路徑
- 技巧分享:如何利用CSS屬性修改圖片顏色?CSS
- jQuery修改和獲取圖片的src屬性值jQuery
- CSS樣式中的right屬性和margin-right屬性的區別CSS
- 【BootStrap】圖片樣式、輔助類樣式和CSS元件 -附原始碼bootCSS元件原始碼
- JQuery屬性與樣式——樣式操作.css()和元素資料的儲存.data()jQueryCSS
- 批次圖片新增水印
- 如何自動地向知識圖譜中新增屬性?
- CSS內聯樣式的使用,設定字型屬性CSS
- jquery如何設定帶有important的樣式屬性jQueryImport
- img圖片的complete屬性用法簡單介紹