Question

我需要一些帮助。基本上我有以下代码，我一直在使用。我不确定是否会有所帮助...

$('#options-1').change(function () {
  -----blahblah
});

options-1是我的下拉菜单。它有两个选项，一个值为“1”，另一个值为“2”。你们能帮助我想出一些能做到以下事情的事情：

当我选择值为'1'的选项时，它应该这样做： 1）找到包含'img'标签的'li'标签。 “IMG”标记的“alt”或“title”属性为1，对应于下拉菜单（1）的值。

2）代码应该改变LI标签：

class="" style="display: none;"

到

class="active" style="display: block;"

而且，如果我选择值为“2”或值为“3”的选项，则会发生同样的事情。

非常感谢您提前！我会感谢任何帮助，建议等。你可能会说我对javascript / jquery（但是：D）还不是很有经验。

Answer 1

$('#options-1').change(function () {
  $('li:has(img[alt="'+$(this).val()+'"])').addClass('active').show();
});

Answer 2

大概应该隐藏非活动列表项，只显示活动列表项。

如果是这样，那就试试这个：

$('#options-1').on('change', function() {
    $("ul#myList li").removeClass('active').hide().has("img[alt='" + $(this).val() + "']").addClass('active').show();
}).trigger('change');

无论如何隐藏非活动项目，可能不需要添加/删除“活动”类。

注意：我们触发更改以确保列表正确反映选择菜单的初始状态。

<强> DEMO

另一种稍微简单的方法是添加/删除“active”类，并允许样式表指令进行显示/隐藏。

CSS：

#myList li {
    display: none
}
#myList li.active {
    display: block
}

使用Javascript：

$('#options-1').on('change', function() {
    $("ul#myList li").removeClass('active').has("img[alt='" + $(this).val() + "']").addClass('active');
}).trigger('change');

<强> DEMO

Answer 3

假设您的选择标记如下所示：

<ul id="yourUl">
    <li><img alt="1" /></li>
    <li><img title="2" /></li>
    <li><img alt="3" /></li>
</ul>

<select id="options-1">
    <option value="1">value 1</option>
    <option value="2">value 2</option>
</select>

所以，你的脚本将是：

var findLi = function(val){
    $("ul#yourUl li img").each(function(){
        if($(this).attr("alt") == val || $(this).attr("title") == val)
            return $(this).parrent();
        return null;
    }
};

$(document).ready(function () {
    $("#options-1").change(function () {
        var val = $(this).val();
        val li = findLi(val);
        if(li == null)
            // do something to handle null or just ignore
        else
            $(li).addClass("active").css("display", "block");
    });
});

或使用has（感谢@Moin）：

$(document).ready(function () {
    $("#options-1").change(function () {
        var val = $(this).val();
        $("ul#yourUl li:has(img[alt='" + val + "']), ul#yourUl li:has(img[title='" + val + "'])").each(function() {
            $(this).addClass("active").css("display", "block");
        });
    });
});

或

$(document).ready(function () { $("#options-1").change(function () { var val = $(this).val(); $("ul#yourUl li img").each(function () { if ($(this).attr("alt") == val || $(this).attr("title") == val) $(this).parrent().addClass("active").css("display", "block"); }); }); });

Javascript / jQuery：根据里面的IMG ALT更改li类和样式

3 个答案: