0

也许我搜索得不好，但到目前为止我还没有找到我的问题的答案。首先是Javascript函数的代码：

<script>
    function showComment(){
        var $data = $(this).parent("td").contents("div.hiddenComment").text();
        console.log($data);
        alert($data);
        return false;
    }
</script>

我还在下面包含了我正在处理的 HTML 代码。基本上它是一个<table>，其中一个<td>有一个<button>和一个隐藏的<div>。的内容<div>应显示在警报/对话框中。

<table class="center">
      <thead>
          <tr>
             <th>Status</th>
             <th>Datum</th>
             <th>Zeit</th>
             <th>Amount</th>
             <th>Source</th>
             <th colspan="2">Comment</th>
          </tr>
       </thead>
       <tbody>
           <tr>
             <td>status1</td>
             <td>2013-04-04</td>
             <td>06:30:38</td>
             <td>3.646.268,00</td>
             <td>SRC1</td>
             <td>
                <div class="hiddenComment">a comment</div>
                <button name="showComment" type="button" href="#" class="showComment" onClick="showComment()">show</button>
             </td>
             <td><a href="#" class="addComment">add</a>
             </td>
          </tr>
          <tr>
             <td>status</td>
             <td>2013-04-05</td>
             <td>06:30:48</td>
             <td>1.732.213,00</td>
             <td>SRC2</td>
             <td>
                <div class="hiddenComment">an other comment</div>
                <button name="showComment" type="button" href="#" class="showComment" onClick="showComment()">show</button>
             </td>
             <td><a href="#" class="addComment">add</a>
             </td>
          </tr>
          .....
      </body>
</table>

我想你可以<table>从这段代码中得到关于的想法。无论如何，我在网上搜索后迄今为止取得的最好成绩是一条"undefined"消息。

我应该注意的是：该类.hiddenComment具有 CSS 属性display:none。

热烈欢迎任何提示、提示和技巧！

感谢您的时间和帮助。

4

2 回答 2

1

您可以将单击事件附加到类 showComment。从那里你可以得到前一个元素并得到它的文本。

演示

$('.showComment').click(function(){
    alert($(this).prev().text());
    //or the below if the order of your elements might change.
    //alert($(this).siblings('.hiddenComment').text());
});

如果您的任何内容是动态加载的，您可以使用委托：

$('body').on('click','.showComment',function(){
    alert($(this).prev().text()); 
});
于 2013-05-02T17:16:08.650 回答
0

你现在正在使用 jQuery，杀死 ol'skool 内联点击调用。简而言之，以下内容将适用于您现在拥有的内容。删除内联“onclick”事件并将其添加到您的 js 中：

<script>
    function showComment(event){
        var $data = $(this).parent("td").contents("div.hiddenComment").text();
        console.log($data);
        alert($data);
        return false;
    }
    $(function() {
        $("button[name=showComment]").on("click", showComment);

        //  OR with a different selector, such as a class name
        //  $(".showComment").on("click", showComment);

        //  OR asign it as a delegate, accounting for "dynamic data"
        //  $("td").on("click", "button[name=showComment]", showComment);
    }
</script>

jsFiddle（使用您的代码的工作示例）

了解有关 jQuery 的更多信息：

于 2013-05-02T17:19:56.490 回答