Question

我在div标签中有一个无序列表，该列表隐藏在就绪状态：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Title goes here</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script>
$(document).ready(function()
{
    $('#great_bands').hide();
});
</script>
</head>
<body>

那么这个DIV部分：

<div id="great_bands">
   <h2>My Favorite Bands </h2>
   <ul id="band_list">
        <li> Metallica (1) </li>
        <li> Skid Row (2) </li>
       <li> AC/DC (3) </li>
   </ul>
 <span onclick="$('ul[li*="1"]').show()">1</span>

我需要on click取消隐藏，并在<li>部分显示带有数字（1）的乐队，但无法使其工作。我已经尝试了很多不同的方法，但无法弄明白（包括onclick而不是jQuery的函数）。单击（1）时它不会执行任何操作。

添加澄清：

当用户加载页面时，会隐藏波段列表，但需要显示它。另外，这是我自己的代码。没有任何东西粘贴在我的作业中，因为它是一个单词问题，没有提供任何来源。我也尝试使用函数调用：

function showBandOne()
{

  $('ul[li*="1"]').show();
};

但这也不起作用。

Answer 1

如果您无法设置li的属性以及要点击的内容，那么我认为最好的方法是使用:contains()选择器，如下所示：{{ 3}}

$(function() {
    $(".show_band").click(function () {
        var num = $(this).text();
        $("ul#band_list li:contains( \(" + num + "\))").show();
    });
});

详细了解:contains() http://jsfiddle.net/B4xKr/1/

Answer 2

的jQuery ..

jQuery('#click_me').click(function(e) {
    jQuery('div#greatbands').find('ul#band_list li:first-child').hide();
});

HTML

 <span id='click_me' style='cursor:pointer;'>Click Me</span>

我建议使用browser inspection功能，并尝试使用select element jQuery CSS来修改elements，例如......（当试图找出jQuery将选择哪个selector时，它有助于使用相同的ul#band_list li:first-child { border:1px solid red; }）。

ul[li*="1"]

同样li是一个引用{{1}}元素上的属性的选择器，而不是内容。如果您指的是根据内容而不是其属性选择元素，那么我建议您使用:contains()（Victory，2014）。

使用jQuery隐藏和显示HTML元素：contains（）

2 个答案: