使用jquery元素和数字

时间：2016-03-02 16:13:05

标签： jquery dry

＆＃13;
＆＃13; 
$('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');
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

如何减少代码并专业地编写＃34;

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

4 个答案:

答案 0 :(得分：3)

而不是编号的类，给它们所有相同的类，并使用.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');

答案 1 :(得分：0)

您也可以试试这个

$('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'); 
});

答案 2 :(得分：0)

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

我无法访问您链接到的图像文件，因此我在每个选择框后面添加了一个范围，而不是更新。校长是一样的：

工作小提琴： 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>

答案 3 :(得分：-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的密钥里连接字符串。

相关问题
最新问题