javascript - 如何使用 jquery $(this) 提供 js 函数

Question

我有一个 php 站点和一个外部 js 文件(我所有的 js 函数都在其中)，当然还有 jquery。

在链接上我想调用一个 js 函数并为这个函数提供两个变量，在函数完成后我想禁用这个链接(视觉上)。

PHP文件

<a href="javascript:void(0);" 
   class="btn btn-primary btn-lg btn-circle btn-shadow btn-text btn-bookmark"
   onclick="bookmark_item( <?=$item_id;?>, <?=$user_id;?> );">
   <span class="icon_heart_alt"></span> Save
</a>

JS文件

function bookmark_item(item_id, user_id);
    $(.btn-bookmark).attr('disabled','disabled');
    e.preventDefault();
    return false;
});

但是我不想在我的 a 链接中使用这个 onclick="..." 短语，我想要一个简洁的 $(document).on( 'click', 'a', function(){ ... }); 我的 js 文件中的函数。但是怎么可能将 $(this) 选择器放入我的 $(document).on... 函数中呢？我需要这个来禁用我的a href按钮，我有很多这样的按钮，所以硬编码ids或类似的东西真的很难完成。

Answer 1

如果您想实际定位当前的 <a>一般在很多<a>在选择 anchor 时，使用 event在 .on('click 上通过)`:

<a data-example="test-london">London</a>
<a data-example="test-rome">Rome</a>
<a data-example="test-paris">Paris</a>

<script type="text/javascript">
    $(document).on('click', 'a', function( event ) {
        alert( $(event.target).attr( 'data-example' ));
    });
</script>

文件: http://jsfiddle.net/hM4kC/

虽然，我通常不会建议这样做。因为这只是一个关于如何选择选定 <a> 的示例从许多结果中提取的 jQuery 对象锚定(例如，当前页面将收集 138 个节点!这是一个昂贵的操作，见下文:)

坚持按类或 ID 选择更快、更清晰和语义化，因此在您的情况下:

<a data-bookmark-item="2" data-userid="501" class="getbook">John Grisham</a>
<a data-bookmark-item="3" data-userid="551" class="getbook">J.K Rowling</a>
<a data-bookmark-item="4" data-userid="201" class="getbook">JRR Tolkien</a>

<script type="text/javascript">
    $(document).on('click', '.getbook', function() {
        var bookMark = $(this).data('bookmark-item'),
            userid = $(this).data('userid');

        console.log( bookMark + ' for user: '+ userId );
        somefunction( bookMark, userId ); //Pass them through to where needed.
    });
</script>

在哪里替换 bookmark-item="4"与 bookmark-item="<?=$item_id;?>"并利用 jQuery 的 .data() 收集相关的 DOM 信息。

fiddle : http://jsfiddle.net/N99B6/3/