使用 jquery 个元素和数字

Question

$('select.farbe-1').change(function() {
  var chosen = $(this).find(":selected").text().toLowerCase();
  $('img.color-1').attr('src', 'http://www.schiendorfer.info/wordpress/wp-content/plugins/bestellungen/img/color/' + chosen + '.jpg');
});

$('select.farbe-2').change(function() {
  var chosen = $(this).find(":selected").text().toLowerCase();
  $('img.color-2').attr('src', 'http://www.schiendorfer.info/wordpress/wp-content/plugins/bestellungen/img/color/' + chosen + '.jpg');
});

$('select.farbe-3').change(function() {
  var chosen = $(this).find(":selected").text().toLowerCase();
  $('img.color-3').attr('src', 'http://www.schiendorfer.info/wordpress/wp-content/plugins/bestellungen/img/color/' + chosen + '.jpg');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-choice choice-1">

  <img class="color-1" src="http://www.schiendorfer.info/wordpress/wp-content/plugins/bestellungen/img/color/blue.jpg">

  <select class="farbe-1" name="farbe_1">
    <option value="3">Black</option>
    <option value="1">Blue</option>
    <option value="2">Green</option>
    <option value="4">Orange</option>
    <option value="0" selected="">Red</option>
  </select>

</div>

<div class="product-choice choice-2">

  <img class="color-2" src="http://www.schiendorfer.info/wordpress/wp-content/plugins/bestellungen/img/color/blue.jpg">

  <select class="farbe-2" name="farbe_2">
    <option value="3">Black</option>
    <option value="1">Blue</option>
    <option value="2">Green</option>
    <option value="4">Orange</option>
    <option value="0" selected="">Red</option>
  </select>

</div>

<div class="product-choice choice-3">

  <img class="color-3" src="http://www.schiendorfer.info/wordpress/wp-content/plugins/bestellungen/img/color/blue.jpg">

  <select class="farbe-3" name="farbe_3">
    <option value="3">Black</option>
    <option value="1">Blue</option>
    <option value="2">Green</option>
    <option value="4">Orange</option>
    <option value="0" selected="">Red</option>
  </select>

</div>

我有上面的代码，它工作正常。但我必须重复这10次。您可以很容易地看到唯一的区别是 select.farbe-**x** 和 img.color-**x**

如何减少代码并写出这个"professionally"？

编辑：我添加了一个代码段 ;)

Answer 1

你可以这样做：

for(var i = 1; i <= 10; i++){
    $('select.farbe-'+i).change(function(){
        var chosen = $(this).find(":selected").text().toLowerCase();
        $('img.color-'+i).attr('src','/wordpress/wp-content/plugins/bestellungen/img/color/'+chosen+'.jpg'); 
    });
}

据我了解，您的问题已解决。您可以在 jQuery 的键内连接字符串。

Answer 2

而不是编号 classes，给它们相同的 class，并使用 .index() 和 .eq() 来获取当前位置并使用它来找到要更改的相应元素。

$('select.farbe').change(function() {
  var index = $("select.farbe").index(this)
  var chosen = $(this).find(":selected").text().toLowerCase();
  $('img.color').eq(index).attr('src', 'http://www.schiendorfer.info/wordpress/wp-content/plugins/bestellungen/img/color/' + chosen + '.jpg');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-choice choice-1">

  <img class="color" src="http://www.schiendorfer.info/wordpress/wp-content/plugins/bestellungen/img/color/blue.jpg">

  <select class="farbe" name="farbe_1">
    <option value="3">Black</option>
    <option value="1">Blue</option>
    <option value="2">Green</option>
    <option value="4">Orange</option>
    <option value="0" selected="">Red</option>
  </select>

</div>

<div class="product-choice choice-2">

  <img class="color" src="http://www.schiendorfer.info/wordpress/wp-content/plugins/bestellungen/img/color/blue.jpg">

  <select class="farbe" name="farbe_2">
    <option value="3">Black</option>
    <option value="1">Blue</option>
    <option value="2">Green</option>
    <option value="4">Orange</option>
    <option value="0" selected="">Red</option>
  </select>

</div>

<div class="product-choice choice-3">

  <img class="color" src="http://www.schiendorfer.info/wordpress/wp-content/plugins/bestellungen/img/color/blue.jpg">

  <select class="farbe" name="farbe_3">
    <option value="3">Black</option>
    <option value="1">Blue</option>
    <option value="2">Green</option>
    <option value="4">Orange</option>
    <option value="0" selected="">Red</option>
  </select>

</div>

或者，由于下拉菜单总是紧跟在图片之后，您可以简单地使用

$(this).prev().attr('src', 'http://www.schiendorfer.info/wordpress/wp-content/plugins/bestellungen/img/color/' + chosen + '.jpg');

Answer 3

你也可以试试这个

$('select[name*="farbe-"]').change(function () {
    var $index=$(this).attr('name').split('-')[1];
    var $colVal=$(this).find(':selected').val();
    $('img.color-'+$index).attr('src','http://www.schiendorfer.info/wordpress/wp-content/plugins/bestellungen/img/color/'+$colVal+'.jpg'); 
});

Answer 4

我做过很多类似的事情，我喜欢将数字 id 值作为数据属性包含在标签上。在这种情况下，我将其称为数据颜色。这样，我可以轻松访问哪个元素具有更改功能，只需获取它的 id 即可。然后我使用这个 ID 来更改相关的其他元素，我已经给了相同的 ID。

我无权访问您 link 的图像文件，因此我在每个 select 框后面添加了一个跨度，这些框被更新了。主体相同：

工作fiddle： https://jsfiddle.net/52yfekzx/

Javascript:

$('select.farbe').change(function(){
    var chosen = $(this).find(":selected").text().toLowerCase();
    var colorID = $(this).data("color");
    $('span.color[data-color="'+colorID+'"]').text(chosen); 
});

HTML:

<div class="product-choice choice-1">

<img class="color"  data-color="1" src="http://www.schiendorfer.info/wordpress/wp-content/plugins/bestellungen/img/color/blue.jpg">

<select class="farbe" data-color="1" name="farbe_1">
    <option value="3">Black</option>
    <option value="1">Blue</option>
    <option value="2">Green</option>
    <option value="4">Orange</option>
    <option value="0" selected="">Red</option>                
</select>
<span class="color" data-color="1"></span>
</div>

<div class="product-choice choice-2">

<img class="color" data-color="2" src="http://www.schiendorfer.info/wordpress/wp-content/plugins/bestellungen/img/color/blue.jpg">

<select class="farbe" data-color="2"  name="farbe_2">
    <option value="3">Black</option>
    <option value="1">Blue</option>
    <option value="2">Green</option>
    <option value="4">Orange</option>
    <option value="0" selected="">Red</option>                
</select>
<span class="color" data-color="2"></span>          
</div>

<div class="product-choice choice-3">

<img class="color" data-color="3" src="http://www.schiendorfer.info/wordpress/wp-content/plugins/bestellungen/img/color/blue.jpg">

<select class="farbe" data-color="3" name="farbe_3">
    <option value="3">Black</option>
    <option value="1">Blue</option>
    <option value="2">Green</option>
    <option value="4">Orange</option>
    <option value="0" selected="">Red</option>                
</select>
<span class="color" data-color="3"></span>

</div>

使用 jquery 个元素和数字

Working with jquery elements and numbers

jquery

dry