0

无论如何要显示一些 li 标签，同时使用 Javascript 隐藏一些标签？如果我的问题没有意义，我很抱歉。

让我在这里写我的代码。

XML:

    <array>
    <words>
    <name>Milk</name>
    <background>Background of Milk</background>
    <recipes>Recipes using Milk</recipes>
    </words>

    <words>
    <name>Tree</name>
    <background>Background of Tree</background>
    <recipes>NIL</recipes> or Not Applicable
    </words>
    </array>

脚本/Javascript：

    <script>
    var wordsName, wordsBG, wordsRecipes, wordsCurrent;
    var wordsArray = new Array();
    $.ajax({
    type:"GET",
    url:"words.xml",
    dataType:"xml",
    success:function(xml)
        {
            $(xml).find('words').each(function() { //find <words> in words.xml
            wordName = $(this).find('name').text();
            wordBG = $(this).find('background').text();
            wordRecipes = $(this).find('recipes').text();
        $('<li><a href="#description">'+threatsName+'</a></li>').appendTo("#testingList");
            threatsArray.push({threatsName:threatsName, threatsBG:threatsBG, threatsCases:threatsCases});
        })
            $('#threats li').click(function(){ //li

                wordsCurrent = $(this).index()
                $('#description h1').text(threatsArray[wordsCurrent].threatsName);
                $('#name').text(threatsArray[wordsCurrent].threatsName);

                var backgroundInformation = wordsArray[wordsCurrent].wordsBG;
                backgroundInformation = backgroundInformation.split("\\n"); //to clear the line
                $('#backgroundInfo').empty(); //empty the things inside
                for (x in backgroundInformation) { //starts from zero and go to the last object
                    $('#backgroundInfo').append(backgroundInformation[x]+ '<br />');
                } //for loop CLOSE 

                var recipesInformation = wordsArray[wordsCurrent].wordsRecipes;
                recipesInformation = recipesInformation("\\n"); //to clear the line
                $('#recipesInfo').empty(); //empty the things inside
                for (x in recipesInformation) { //starts from zero and go to the last object
                    $('#recipesInfo').append(recipesInformation[x]+ '<br />');
                } //for loop CLOSE 
            })

        }
    </script>

最后，我的 HTML

<div data-role="page" id="menu">
<div data-role="header">
<h1>Home Page</h1>
</div>

<div data-role="content">
  <ul data-role="listview">
    <li>
        <a href="#words" data-transition="pop"><h3>Words</h3></a>
    </li>
    <li>
        <a href="#notAvail" data-transition="pop"><h3>Not Available</h3></a> <!--Not Available-->
    </li>
  </ul>
</div>


    </ul>
</div>


    <div data-role="content"> <!--Start of DESCRIPTION content-->
        <ul data-role="listview" id="informationList">
            <li>
                <a href="#background" data-transition="pop"><h3>Background</h3></a>
            </li>
            <li>
                <a href="#recipes" data-transition="pop"><h3>Recipes</h3></a>
            </li>
        </ul>
    </div> <!--End of DESCRIPTION content-->

</div>  <!--End of DESCRIPTION-->

<div data-role="page" id="background"> <!--Start of BACKGROUND-->
    <div data-role="header">
        <a href="#description" data-transition="slide" data-icon="back" data-iconpos="notext" data-direction="reverse"></a>
        <h1>Background</h1>
        <a href="#menu" data-transition="slide" data-icon="home" data-iconpos="notext" data-direction="reverse"></a>
    </div>

    <div data-role="content"> <!--Start of BACKGROUND content-->
        <p id="backgroundInfo">Not Available</p>
    </div> <!--End of BACKGROUND content-->

</div>  <!--End of BACKGROUND-->

<div data-role="page" id="recipes"> <!--Start of RECIPES-->
    <div data-role="header">
        <a href="#description" data-transition="slide" data-icon="back" data-iconpos="notext" data-direction="reverse"></a>
        <h1>Background</h1>
        <a href="#menu" data-transition="slide" data-icon="home" data-iconpos="notext" data-direction="reverse"></a>
    </div>

    <div data-role="content"> <!--Start of RECIPES content-->
        <p id="recipesInfo"> Recipes</p>
    </div> <!--End of RECIPES content-->

</div>  <!--End of RECIPES-->

如上信息，Array中的第二个元素Tree，没有recipe选项卡的任何信息，如何在用户点击Tree时提示页面，recipe li会自动隐藏？

非常感谢。这是我第一次发送问题。

4

1 回答 1

0

欢迎来到 StackOverflow！您似乎正在解析 XML 并使用 JavaScript 动态生成 HTML。在您的情况下，也许最简单的方法是在解析期间检测条件并将“类”属性添加到您的 <li> 节点。然后在 CSS 中的某处定义样式类，如下所示：

<li class="no-recipe">blah blah blah</li>

<style>
    li.no-recipe {
        display:none;
    }
</style>

不确定您的目标是什么，但声明性方法几乎总是比动态方法（使用 JavaScript）更好。

于 2013-08-28T19:22:46.137 回答