Question

我有这样的HTML： ul有很少的li元素，有删除按钮，

问题是：我需要使用CheckMark图像标记显示正确的li元素，

假设我正在调用ShowCheckMarkLi（描述，客户端）

那么只有2 li应该在带有CheckmarkImage.Ico的UL元素中显示其他应该消失

html是这样的： -

   <ul>
            <li id="liRightDescriptions">
                <span>
                    <span>Descriptions</span>
                    <img class="removeImg" src="../Images/RemoveButton.ico" /></span>
            </li>
            <li id="liRightSpecialization">
                <span><span>Specialization</span><img style="display: none;" class="removeImg" src="../Images/RemoveButton.ico" /></span>
            </li>
            <li id="liRightOrgChart">
                <span>Org Chart</span><img style="display: none;" class="removeImg" src="../Images/RemoveButton.ico" />
            </li>
            <li id="liRightClient"><span>
                <span>Client</span>
                <img style="display: none;" class="removeImg" src="../Images/RemoveButton.ico" /></span></li>
            <li id="liRightAchievements"><span>
                <span>Achievements</span>
                <img class="removeImg" src="../Images/RemoveButton.ico" /></span></li>
            <li id="liRightMemberships"><span>
                <span>Memberships</span>
                <img class="removeImg" src="../Images/RemoveButton.ico" /></span></li>
            <li id="liRightGetRatings"><span>
                <span>Get Ratings</span>
                <img class="removeImg" src="../Images/RemoveButton.ico" /></span></li>
            <li id="liRightSkills"><span>
                <span>Skills</span>
                <img class="removeImg" src="../Images/RemoveButton.ico" /></span></li>
        </ul>

我这样想：

    function ShowRightCheckMarkButton(Descriptions, Skills, Client, Achievements, Memberships, OrgChart, Specialization,GetRatings) {
            $('.divright').css("visibility", "visible");
            $('#listProjectRelated').empty();
            if (Achievements) {
                $('#listProjectRelated').append("<li id='liRightAchievements'><span><span>Achievements</span><img class='checkImg' src='../Images/Checkmark.ico'/></span></li>")
            }
            else
            {
                $('#listProjectRelated').append("<li id='liRightAchievements'><span><span>Achievements</span><img class='removeImg' src='../Images/RemoveButton.ico'/></span></li>")
            }
.
.
.
.
.
.

    }

Answer 1

您的函数在行中引用了一个id“listProjectRelated”：

$('#listProjectRelated').empty();

这应该是ul元素的id吗？所以你的HTML的第一行应该是

<ul id="listProjectRelated">

Answer 2

为您找到了解决方案here。您描述所需函数的方式的一个问题是您传递的是变量名称 - 我假设它们是字符串。

在伪代码中，你想要实现的是（我认为）：

抓住所有的lis。
对于他们每个人，看看它的文本是否与任何参数匹配（'客户'，'描述'）：
如果是这样，请更改li中的图像以显示您提到的图标（并确保显示图像）。
如果没有，请从列表中删除li。

您要调用的函数的代码如下：

function ShowCheckMarkLi(){
    // Get all the lis
    var lis = document.getElementsByTagName('li');

    // Loop through them...
    for(var i = 0, l = lis.length; i < l; ++i){
        // And, for each, loop through the arguments
        for(var j = 0, m = arguments.length; j < m; ++j){
            // If the argument string is found in the li's text...
            if(lis[i].innerText.match(arguments[j])){
                // ...Find the image
                var img = lis[i].getElementsByTagName('img')[0]
                // ...Change its src attribute to replace all the text after the last slash with your filename
                img.src.replace(/[^\/]+$/, 'CheckmarkImage.Ico');
                // ...And make sure it's displayed.
                img.style.display = 'inline-block';
            }
            // Otherwise...
            else {
                // ...Remove it!
                lis[i].parentNode.removeChild(lis[i]);
            }
        }
    }
}

// Call your function with strings
ShowCheckMarkLi('Descriptions','Client');

Answer 3

演示：http://jsfiddle.net/8YXDJ/

    function ShowLi(val) {
        $("#_ul li").css('display','none');
        $(val).each(function() { 
            var t = String(this);
            $("#_ul li span").filter(function() {
                return (jQuery.trim($(this).text()) == t);
            }).parent().css('display','');
        });
    }
ShowLi([ "Descriptions","Specialization","Skills" ])

想要根据某些条件显示正确的Li元素

3 个答案: