Javascript/jQuery：根据内部的 IMG ALT 更改 li 类和样式答案

【问题标题】：Javascript/jQuery: Change li class and style depending on the IMG ALT insideJavascript/jQuery：根据内部的 IMG ALT 更改 li 类和样式
【发布时间】：2012-07-31 07:04:40
【问题描述】：

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

$('#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）。

【问题讨论】：

标签： javascript jquery select drop-down-menu image

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

<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");
        });
    });
});

【讨论】：

【解决方案3】：

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

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

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

考虑到不活动的项目无论如何都被隐藏了，可能不需要添加/删除“活动”类。

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

DEMO

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

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

【讨论】：