Так что я не веб-разработчик и не знаю, как правильно говорить об этой проблеме. Итак, я строю селектор стрелок, который имеет много полей выбора, и у меня есть div с изображениями, изображения меняются в выбранном пользователем поле, поэтому здесь у меня есть некоторые ошибки, которые появляются, когда пользователь пытается выбрать некоторые параметры. Например, если бы я выбрал одно поле цвета стрелки, изображение в div меняется, но в неправильном контейнере (каждое выбранное изображение появляется в одном и том же контейнере)
Мой пример BUG GIF моего селектора:
Веб-сайт с селектором, который хорошо работает, вы можете видеть, что каждый вариант выбора хорошо работает с изображением.
Мой JQuery код:
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > < /script> < script language = "javascript" >
$(document).ready(function() {
$(".dk_options_inner li").mouseover(function() {
$(this).parent(".dk_options_inner").find("li").removeClass("dk_option_current");
$(this).addClass("dk_option_current");
$(this).parent(".dk_options_inner").find("li").removeClass("dk_option_current selected");
$(this).addClass("dk_option_current selected");
$(this).closest(".dk_container").find(".dk_label").text($(this).text());
var tip = $(this).find("a").attr("data-image");
$("#arrow-img-tip").find("img").attr("src", tip);
});
$(".dk_options_inner li").click(function() {
$("#dk_container_arrow-tip").attr('class', 'dk_container dk_theme_black');
$("#dk_container_arrow-front").attr('class', 'dk_container dk_theme_black');
$("#dk_container_arrow-nok").attr('class', 'dk_container dk_theme_black');
});
});
</script>
Мой HTML код:
<div class="arrow-section arrow-col-3">
<div class="arrow-section-left">
<div id="arrow-select-tip">
<div class="arrow-selectbox-wrapper">
<h4><span>Point</span></h4>
<div class="dk_container dk_theme_black" id="dk_container_arrow-tip" tabindex="1" style="display: block;"><a onclick="uzdarom_tip_menu();" class="dk_toggle" style="width: 129px;"><span class="dk_label">TopHat 3D 20g</span></a>
<div class="dk_options">
<ul class="dk_options_inner">
<li class="dk_option_current selected"><a data-dk-dropdown-value="1" data-image="http://www.falco.ee/arrow/eng/img/teravikud/steel_field.png">TopHat 3D 20g</a></li>
<li class=""><a data-dk-dropdown-value="2" data-image="http://www.falco.ee/arrow/eng/img/teravikud/brass_bullet.png">TopHat 3D 70g</a></li>
<li class=""><a data-dk-dropdown-value="4" data-image="http://www.falco.ee/arrow/eng/img/teravikud/3D.png">TopHat 3D 100g</a></li>
<li class=""><a data-dk-dropdown-value="6" data-image="http://www.falco.ee/arrow/eng/img/teravikud/brass_3d.png">Brass 3D 70g</a></li>
<li class=""><a data-dk-dropdown-value="7" data-image="http://www.falco.ee/arrow/eng/img/teravikud/brass_3d.png">Brass 3D 100g</a></li>
<li class=""><a data-dk-dropdown-value="9" data-image="http://www.falco.ee/arrow/eng/img/teravikud/brass_bullet.png">Brass Bullet 70g</a></li>
<li class=""><a data-dk-dropdown-value="10" data-image="http://www.falco.ee/arrow/eng/img/teravikud/brass_bullet.png">Brass Bullet 100g</a></li>
<li class=""><a data-dk-dropdown-value="12" data-image="http://www.falco.ee/arrow/eng/img/teravikud/steel_field.png">Steel Field 70g</a></li>
<li class=""><a data-dk-dropdown-value="13" data-image="http://www.falco.ee/arrow/eng/img/teravikud/steel_field.png">Steel Field 100g</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="arrow-section-right">
<div id="arrow-select-nok">
<div class="arrow-selectbox-wrapper">
<h4><span>Nock color</span></h4>
<div class="arrow-selectbox-container">
<div class="dk_container dk_theme_black" id="dk_container_arrow-nok" tabindex="1" style="display: block;"><a onclick="uzdarom_color_menu();" class="dk_toggle" style="width: 69px;"><span class="dk_label">Black</span></a>
<div class="dk_options">
<ul class="dk_options_inner">
<li class="dk_option_current"><a data-dk-dropdown-value="1" data-image="http://www.falco.ee/arrow/eng/img/nokid/black.png">Black</a></li>
<li class=""><a data-dk-dropdown-value="2" data-image="http://www.falco.ee/arrow/eng/img/nokid/lime.png">Lime</a></li>
<li class=""><a data-dk-dropdown-value="3" data-image="http://www.falco.ee/arrow/eng/img/nokid/orange.png">Orange</a></li>
<li class=""><a data-dk-dropdown-value="4" data-image="http://www.falco.ee/arrow/eng/img/nokid/red.png">Red</a></li>
<li class=""><a data-dk-dropdown-value="5" data-image="http://www.falco.ee/arrow/eng/img/nokid/white.png">White</a></li>
<li class=""><a data-dk-dropdown-value="6" data-image="http://www.falco.ee/arrow/eng/img/nokid/yellow.png">Yellow</a></li>
</ul>
</div>
</div>
<select id="arrow-nok" name="nok" data-direction="down" class="arrow-dropdown black dk" tabindex="1" style="display: none;">
<option selected="selected" value="1">Black</option>
<option value="2">Lime</option>
<option value="3">Orange</option>
<option value="4">Red</option>
<option value="5">White</option>
<option value="6">Yellow</option>
</select>
</div>
</div>
</div>
</div>