Question

使用jquery ......

我试图点击术语或概念以查看定义（我的列表项）。当我点击定义时，我希望将其替换为术语或概念。

我尝试使用唯一ID来分隔每个p＆amp; li让他们单独回应点击。我添加了一个href =＆＃34;＃＆＃34;在我的html中，使每个列表项都成为单击的链接。

然而，当我运行代码时，点击操作所有四个＆＃34; java-shows＆＃34;和＆＃34; java-hiding＆＃34;同时对所有人进行分组。这导致页面仅在前两个列表项之间切换＆＃34; JavaScript（JS），＆amp;算＆＃34; JavaScript的定义＆＃34;面向对象的......＆＃34;。

首先为什么我只点击一个定义？我期待2 ...

如果有人可以帮助我，那就太棒了，我对Javascript，html，css非常陌生。

// HTML

<body>
<ul>
 <div class ="java-hiding">
 <li id="li1" <a href="#"> JavaScript (JS)</a></li>
 </div>
 <div class ="java-showing">
   <p id="p1" <a href="#">An object-oriented computer programming language commonly used to create interactive effects within web browsers.</a></p>
 </div>
 <div class="java-hiding">
  <li id="li2" <a href="#">Operators</a></li>
  <div class ="java-showing">
    <p id ="p2" <a href="#">constructs which behave generally like functions, but which differ syntactically or semantically from usual functions</a></p>
  </div>
</ul>

// Java Script

$(document).ready(function() {
  $("li#li1, p#p1, li#li2, p#p2").click(function() {
   $(".java-showing").toggle();
   $(".java-hiding").toggle();
});
});

/// CSS

.java-showing { display:none; }

Answer 1

您的Html结构不合理，因为您的类名相同，事件将对预期的所有元素进行操作。

此外，您不必为每个元素添加ID以实现您的功能。

您是否正在寻找此类行为 - FIDDLE

 <div class ="java-hiding">
    <li id="li1"><a href="#"> JavaScript (JS)</a></li>
 </div>
 <div class ="java-showing">
    <p id="p1">
      <a href="#">An object-oriented computer programming language commonly used to create interactive effects within web browsers.</a>
    </p>
 </div>
 <div class="java-hiding">
    <li id="li2"> <a href="#">Operators</a></li>
  </div>
  <div class ="java-showing">
    <p id ="p2">
      <a href="#">constructs which behave generally like functions, but which differ"#">constructs which behave generally like functions, but which differ syntactically or semantically from usual functions</a>
     </p>
  </div>

Jquery的：

$(document).ready(function() {
  $("li").click(function() {
     $(this).parent().next().toggle(); 
  });
  $("p").click(function() {
     $(this).parent().toggle(); 
  });    
});

Answer 2

它将对所有java-showing和java-hidden元素进行操作，因为它们是类。所以他们是一个集合。此外，它们都被选中以在您的点击功能中切换。

这就是我认为你想要的HTML。

<ul>
    <li id="li1" class ="java-hiding">
        <a href="#"> JavaScript (JS)</a>
    </li>
    <p id="p1" class="java-showing">
        <a href="#">An object-oriented computer programming language commonly used to create interactive effects within web browsers.</a>
    </p>
    <li id="li2" class="java-hiding">
        <a href="#">Operators</a>
    </li>
    <p id="p2" class="java-showing">
        <a href="#">constructs which behave generally like functions, but which differ syntactically or semantically from usual functions</a>
    </p>
</ul>

Answer 3

我相信您所期望的是在您点击时动态显示内容，请参阅我设置的示例以帮助您：

$(document).ready(function() {
  $("li").click(function() {
   $(this).find("div").toggleClass('java-hiding');
});
});

.java-hiding { display:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<body>
<ul>
 
 <li id="li1"><a href="#"> JavaScript (JS)</a>
 <div class="java-hiding">
   <p id="p1"> <a href="#">An object-oriented computer programming language commonly used to create interactive effects within web browsers.</a></p>
 </div>
 </li>

 

 <li id="li2"> <a href="#">Operators</a>
 <div class="java-hiding">
    <p id ="p2">
    <a href="#">constructs which behave generally like functions, but which differ syntactically or semantically from usual functions</a></p>
  </div>
 </li>
  
</ul>

使用JavaScript切换html列表项

3 个答案: