Question

我有这个：

jQuery(document).ready(function(){
    jQuery('a.color2030').click( function() {
        jQuery('tbody').hide();
        jQuery('tbody.color2030').show();
    });
    jQuery('a.color2031').click( function() {
        jQuery('tbody').hide();
        jQuery('tbody.color2031').show();
    });
...
...
    jQuery('a.color2037').click( function() {
        jQuery('tbody').hide();
        jQuery('tbody.color2032').show();
    });
});

但是不想为每个链接重复代码块。我可以通过任何方式从链接中获取id。它可能是color2030等。

我试过了：

<a href="#color2030" class="color2030" id="test2030">
<a href="#color2031" class="color2031" id="test2031">
<a href="#color2032" class="color2032" id="test2032">

在jQuery中：

jQuery('a').click(function() {
    // this works
    var id = 'test';
    alert(id); // will alert 'test'

    // this does not work
    var id = $(this).attr('id');  //update2: should have been jQuery(this...
    alert(id); // no alert but error on page
});

但我似乎无法抓住身份证。 “var id”行似乎有错误。有没有其他方法可以在按下时从a-tag读取id / class或其他标签？

BR。安德斯

更新：由于一个错字，两个人发现不超过30 sek！

UPDATE2并解决了！我无法发现的错误是$（this）它应该是'var id'行中的jQuery（this）

使用解决方案进行最终更新这是诀窍

jQuery(document).ready(function(){
    jQuery('a').click( function() {
        var id = this.id;
        alert(id);

        jQuery('tbody').hide();
        jQuery('tbody.'+id).show();
    });

});

Answer 1

onclick应为click：

jQuery('a').click(function() {
    var id = $(this).attr('id');
    alert(id);
});

Answer 2

有一些错误。这是重构和工作的代码：

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery('a').click(function() {
                alert(this.id);
            });
        });
    </script>   

</head>
<body>

<a href="#color2030" class="color2030" id="test2030">test2030</a>
<a href="#color2031" class="color2031" id="test2031">test2031</a>
<a href="#color2032" class="color2032" id="test2032">test2032</a>

</body>
</html>

onclick不是jQuery方法。请使用点击。
这是一个HTML DOM锚点对象。因此，调用属性id将返回其值。

希望这有帮助。

Answer 3

您的活动中有拼写错误：

jQuery('a').click(function() {
    var id = $(this).attr('id');
    alert(id);
});

最好使用Firebug或Web Developer进行此类调试。话虽如此，如果此事件正确解雇，您将收到空白警报......

Answer 4

您的代码中的错误是您绑定到“onclick”，而不是“点击”。

Answer 5

你有基本正确的做法 - 不要忘记将你的脚本包装在$(document).ready(..)中，否则你的脚本会在所有元素加载之前尝试绑定它的事件处理程序。如上所述，您还使用了onclick而不是click。您也可以直接引用this。

<script type="text/javascript">
$(document).ready(function() {
    $('a').click(function() {
        var id = this.id;
        alert(id);
    });
});
</script>

Answer 6

从查看你要做的事情......你无法隐藏tbody然后取消隐藏它的一部分。尝试做这样的事情：

HTML

<a href="#color2030" class="color">2030</a> 
<a href="#color2031" class="color">2031</a> 
<a href="#color2032" class="color">2032</a> 
<a href="#color2033" class="color">2033</a> 
<a href="#color2034" class="color">2034</a> 
<a href="#color2035" class="color">2035</a> 
<a href="#color2036" class="color">2036</a> 
<a href="#color2037" class="color">2037</a> 
<a href="#color2038" class="color">2038</a> 

<table>
 <tbody>
  <tr>
   <td id="color2030">2030</td>
   <td id="color2031">2031</td>
   <td id="color2032">2032</td>
  </tr>
  <tr>
   <td id="color2033">2033</td>
   <td id="color2034">2034</td>
   <td id="color2035">2035</td>
  </tr>
  <tr>
   <td id="color2036">2036</td>
   <td id="color2037">2037</td>
   <td id="color2038">2038</td>
  </tr>
 </tbody>
</table>

脚本

$(document).ready(function(){
 $('table tbody td').hide();
 $('a.color').click(function(){
  var selColor = $(this).attr('href');
  $('table tbody td').hide();
  $('td'+selColor).show();
 })
})

jquery，从点击的项目中获取id / class / other并重用

6 个答案: