shopify 屬性新增圖片及樣式

chbklmt發表於2019-03-21

        <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>

相關文章