与jQuery元素和数字

$('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**

如何减少代码并将其写入“专业”？

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

来源

2016-03-02 Emanuel Schiendorfer

使用DOM遍历对引发事件的一个元素链接你想要修改。如果你可以编辑你的问题来包含一个HTML样本，我可以给你一个这样的例子。 –

HTML的结构对于回答您的问题至关重要。 – j08691

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

来源

2016-03-02 16:28:00 Barmar

我喜欢这个主意，但我无法让它工作。不知何故，它总是改变最后一个图像项目。请给我一个片段？ –

用我的代码修改你的代码片段。 – Barmar

非常感谢！之前有一个;我想，太多了。 –

-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的关键字中串联字符串。

来源

2016-03-02 16:18:55

这将始终选择“img.color-11”，而不是相对于选择的图像。 – j08691

你也可以试试这个

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

来源

2016-03-02 16:54:08

我我做了相当多的类似的东西，我喜欢包括数字我d值作为标签上的数据属性。在这种情况下，我会称之为数据颜色。这样，我可以轻松访问哪个元素具有更改功能，只需获取它的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>

来源

2016-03-02 17:00:35 KjetilNordin

与jQuery元素和数字

回答

相关问题