Работа с 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**

Как я могу уменьшить код и написать «профессионально»?

Edit: я добавил сниппета;)

Answer 1

Вместо нумерованных классов дайте им все одинаковые классы и используйте .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 2

Вы можете сделать что-то подобное:

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

I «Я сделал довольно много похожего материала, и мне нравится включать число i d в качестве атрибута данных для тегов. В этом случае я бы назвал его цветом данных. Таким образом, я могу легко получить доступ к элементу с функцией изменения, просто получив его 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>