0

我有这样的 html：ul 有几个 li 元素，带有删除按钮，

问题是：我需要用 CheckMark Image 符号显示正确的 li 元素，

假设我正在调用 ShowCheckMarkLi(Descriptions,Client)

那么只有 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>")
            }
.
.
.
.
.
.

    }
4

3 回答 3

0

演示：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" ])
于 2013-02-28T05:29:13.857 回答
0

在这里为您提供解决方案。您描述所需函数的方式的一个问题是您正在传递变量名——我假设这些是字符串。

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

  1. 抓住所有的清单。
  2. 对于它们中的每一个，查看其文本是否匹配任何参数（'Client'、'Descriptions'）：
  3. 如果是这样，请更改 li 中的图像以显示您提到的图标（并确保图像正在显示）。
  4. 如果没有，请从列表中删除 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');
于 2013-02-27T14:03:16.883 回答
0

您的函数在以下行中引用了一个 id 'listProjectRelated'：

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

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

<ul id="listProjectRelated">
于 2013-02-27T14:01:59.953 回答