фильтрация классов div на основе выпадающего списка с помощью jquery - PullRequest
Новая
       27

фильтрация классов div на основе выпадающего списка с помощью jquery

0 голосов
/ 12 ноября 2011

Я использую Jquery 1.6. У меня есть выпадающий список с кучей опций.

Я пытаюсь заставить мои выпадающие окна скрывать элементы в зависимости от значения выпадающего списка.

Если я выберу в раскрывающемся списке «вариант 1.8», я хочу, чтобы он посмотрел на атрибут value и на основе последних трех символов в значении нашел все div-классы, заканчивающиеся одинаковыми символами, и скрыл их.

Сценарий, приведенный ниже, работает, но проблема в том, что я хочу, чтобы мое «значение» в раскрывающемся списке не совпадало с именем моего класса в моем html. Вот почему я хотел, чтобы он нашел последнюю часть значений. 

<script type='text/javascript'>
$(window).load(function(){
$("#version-select").bind("change", function() {
    $("div").filter('.' + this.value).show().siblings().hide();
});
});  
</script>


<select name="version-select" id="version-select">
    <option value="option_1_6">Option 1.6</option>
    <option value="option_1_7">Option 1.7</option>
    <option value="option_1_8">Option 1.8</option>
    <option value="option_2_0">Option 2.0</option>
</select>

<div class="class_1_6">
<img src="my_path/to/my_images"/>
<p>some text</p>
</div>

<div class="table_info_1_7">
<img src="my_path/to/my_images"/>
<p>some text</p>
</div>

<div class="class_1_8">
<img src="my_path/to/my_images"/>
<p>some text</p>
</div>

Любая помощь в получении последней части значений на основе опции, которую я выберу в раскрывающемся списке, будет полезной.

Ответы [ 2 ]

1 голос
/ 12 ноября 2011

Проверьте это скрипка . Я использовал jqueryEndsWithSelector . 

$('#version-select').change(function(){
    var val = $(this).val();
    var lastThreeChars = val.substring(val.length - 3);
    $('div').hide();
    $('div[class$="' + lastThreeChars + '"]').show();
});
0 голосов
/ 12 ноября 2011

Попробуйте использовать что-то вроде: 

$(function(){   
    $("#version-select").bind("change", function() {
        var value = $(this).find("option:selected").val();
        var last3chars = value.substring( value.length - 3)
        $("div").hide();
        $(".class_" + last3chars).show();
    });
});

См. Демонстрацию: http://jsfiddle.net/7YSPS/2/

...