Question

在这里，我试图了解下一步是如何工作的。在这里我试图显示一个隐藏的textarea点击一个span元素。隐藏的textarea是span元素的直接下一个兄弟。但似乎它不工作我收到以下错误：

ReferenceError：$未定义

<html>
<head>
<style>

.customcmntform{
   display:none;
 }

 #customcomment{
   color:blue;
   cursor:pointer;
   text-decoration:underline;
 }

</style>
<script  src='jquery/jquery.js'></script>
</head>
</body>
    <div class='customcmntholder'></div>
    <span id='customcomment' class='cmnt' onclick='letmecomment(event);'>Add a Comment...</span>
    <form action='<?php echo $_SERVER['PHP_SELF']; ?>' method='post'  name='cmntform'> 
        <textarea   class='customcmntform' placeholder=' add a comment......' >
        </textarea>
    </form> 
    <script>

    function letmecomment(event){
        var cmnt=event.target;
        var area=$(cmnt).next('.customcmntform');
        $(area).show();
    }

    </script>
</body>
</html>

Answer 1

zami，请检查以下代码，这样可以正常使用。

   function letmecomment(event){
     $(event.target).next('form').find('.customcmntform').show();
   }

Next（）： - 获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。

Answer 2

而不是使用onClick尝试使用.click方法，因为它遵循在现代浏览器中注册eventListeners的标准。

始终使用$(document).ready()，因为这是jQuery库中用于检测内容的完整负载和DOM的就绪状态的外观设计模式。

您的代码可能如下所示：

<span id='customcomment'>Add a Comment...</span>
<form action='#' method='post'  name='cmntform'> 
    <textarea   class='customcmntform' placeholder=' add a comment......' >
    </textarea>
</form>

然后使用这个JS代码段：

$(document).ready(function() {
   $('#customcomment').click(function() {
        console.log('a');
      $(this).next().find('.customcmntform').show();
   })
 });
</script>

Working Demo

Answer 3

尝试使用$（cmnt）.nextSibling（），这样可以获得与您的跨度处于同一级别的下一个标记。 $（..）。next用于在元素搜索jquery上获得多重匹配时。

<table>
    <tr>
        <td class="clsname">something1</td>
        <td class="clsname">something2</td>
    </tr>
</table>
<script>
    $(.clsname).next(); //this should retrieve the something2 td tag.
</script>

对于您的情况，您只有来自event.target的span元素。在这种情况下，尝试使用$（cmnt）.nextSibling（）来获取下一个相同级别的标记。

Answer 4

首先，我认为链接jQuery是一个错误。首先尝试使用Google托管脚本，因为评论中提到了这一点。即使它不是那样的：我会使用像

这样的东西

$('#customcomment').on("click", function() {
    // code here
});

这使代码更清晰。

不能使用jquery next（）抓住下一个兄弟姐妹

4 个答案: