Question

我写了一个类似于这个例子的简单脚本。问题是click事件只绑定到条件语句中的第一个#id。我想到为什么会发生这种情况是每个语句中都没有任何内容可以将ID与click函数中的类相关联，但是当我尝试添加var时，点击根本不会触发。请告诉我哪里出错了。感谢

$(document).ready(function(){
        $('.someclass').bind('click', function() {
          if('#id1')
          {
            window.location = "someURL";
          }
          else if('#id2')
          {
             window.location = "someURL2";
          }
          else if('#id3')
          {
              window.location = "someURL3";
          }
            });
    });

Answer 1

您可以检查他们的ID是这样的

$(document).ready(function () {
    $('.someclass').bind('click', function () {
        if(this.id === 'id1') {
            window.location = "someURL";
        } else if(this.id === 'id2') {
            window.location = "someURL2";
        } else if(this.id === 'id3') {
            window.location = "someURL3";
        }
    });
});

Answer 2

考虑：

<span data-url="someURL">Link 1</span>
<span data-url="someURL2">Link 2</span>

然后：

$wrapper.on( 'click', 'span', function () {
    window.location = $( this ).data( 'url' );
});

其中$wrapper包含DOM元素，而DOM元素又包含所有“链接”。

这里的想法是将数据与JavaScript代码（=行为）分开。您的网址应该在DOM中 - 您可以使用data-*属性来存储它们（如上所示）。

Answer 3

由于您已经为元素使用了id，因此您应该单独使用它们来绑定click函数。它更容易，而且有效：）

$(document).ready(function(){
    $('#id1').click(function(){
        window.location = "someURL";
     });
    $('#id2').click(function(){
        window.location = "someURL2";
     });
    $('#id3').click(function(){
        window.location = "someURL3";
     });
});

如果你更喜欢原来的方式（你不应该;-)）那么试试这个：

      if( $(this).attr("id") == 'id1' )
      {
        window.location = "someURL";
      }

Answer 4

我认为你在思考问题并且也不知道你可以使用什么。我会利用链接上的数据属性。我将假设它们不是典型的带有HREF的A标签，因为如果是这样你就不应该使用JavaScript。

<div data-url="http://www.someurl1.com">...</div>
<div data-url="http://www.someurl2.com">...</div>
<div data-url="http://www.someurl3.com">...</div>

<script>
    $('body').on('click','div[data-url]', function(ev) {
        ev.preventDefault();
        window.location = $(this).data('url');
    }
</script>

Answer 5

如果我的理解符合您的要求，那么您有一个名为“someclass”的css类，其中包含超链接。你需要通过jQuery动态设置这些超链接的URL，我是否正确？如果是这样，那么您可以尝试以下代码：

<script type="text/javascript" src="../Scripts/jQuery/jquery-1.7.2.js"></script>
<script type="text/ecmascript">
    $(document).ready(function () {

        $(".someclass > a").live("click", function () {
            var currentID = $(this).attr("id");
            if (currentID == "id1") {
                window.location = "http://google.com";
            }
            else if (currentID == "id2") {
                window.location = "http://stackoverflow.com";
            }
            else if (currentID == "id3") {
                window.location = "http://jquery.com";
            }
        });
    });

</script>

<div>
    <div class="someclass">
        <a id="id1">id 1</a>
        <a id="id2">id 2</a>
        <a id="id3">id 3</a>

    </div>
</div>

将单击事件绑定到三个不同的链接

5 个答案: