如何定位選擇選項的數據屬性？

我正在嘗試根據用戶選擇的dropdown/select選項進行圖像更改。但是，我需要使用data屬性來執行此操作，而不是簡單的option值，因爲我需要將其用於其他操作。我似乎無法弄清楚我做錯了什麼。我附加的代碼不針對data-image屬性。想法我做錯了什麼？如何定位選擇選項的數據屬性？

示例代碼：

<html> 
<div> 
    *Flavor 1: 
</div> 
<div> 
    <select class="custom-cupcake-flavor" name="custom-cupcake-flavor"> 
     <option data-image="noimage.jpg" value="">-- Please Choose an Option --</option> 
     <option data-image="Chocolate-Covered-Strawberry.jpg" value="Chocolate Swirl">Chocolate Swirl</option> 
     <option data-image="strawberryLemonade.jpg" value="Extreme Lemon">Extreme Lemon</option> 
     <option data-image="Cookie-Dough-Delight.jpg" value="Vanilla Blast">Vanilla Blast</option> 
    </select> 
</div> 


<br> 

<div class="col-md-6"> 
    <img id="uploadedImage" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=400%C3%97400&w=400&h=400"> 
    <br> 

</div> 
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 

<div style="clear:both;"></div> 
<script type='text/javascript'> 
    $(document).ready(function() { 
     var flavor; 
     var image_name; 

     $(".custom-cupcake-flavor").on('change', function() { 
      flavor = $(this).data("image"); 
      image_name = ("/images/" + flavor); 

      $('#uploadedImage').fadeOut(200, function() { 
       $('#uploadedImage').attr('src', image_name).bind('onreadystatechange load', function() { 
        if (this.complete) $(this).fadeIn(400); 
       }); 
      }); 
     }); 

    }); 
    <!-- Hides Product Image when "No image" option is selected.--> 
    $(document).ready(function() { 
     $('.custom-cupcake-flavor').on('change', function() { 
      if (this.val() !== "") { 
       $("#uploadedImage").hide(); 
      } else { 
       $("#uploadedImage").show(); 
      } 
     }); 
    }); 
</script> 

</html>

來源

2015-09-18 Josh979

你如果條件應該是這樣'如果（$（本）。數據（'image'）！=''）' – Sushil

我不確定如果你指的是條件...如果你的意思是'if（this.val（）！==「」）'我把它設置爲檢查選項的值，而不是故意使用數據圖像屬性。這是因爲選擇下拉菜單中的第一個選項始終具有「」「'的值。 – Josh979

哦..我的壞..我以爲你想檢查'數據'屬性值而不是'選項'值。 – Sushil

可以使用:selected selector讓您的下拉列表中選擇的選項：

$('.custom-cupcake-flavor').on('change', function() { 
    var $option = $(this).find(':selected'); 
    var imageUrl = $option.data('image'); 

    // You might want to do something with imageUrl here: 
    $('#uploadImage').attr('src', imageUrl); 
}); 
// If you want to run the above on initial load you can trigger the change event: 
// $('.custom-cupcake-flavor').trigger('change');

來源

2015-09-18 23:42:47 andlrc

如何定位選擇選項的數據屬性？

回答

相關問題