jquery $(this) 如何提供js函数

Posted 2023-05-09

【中文标题】jquery $(this) 如何提供js函数

【英文标题】：How provide js function with jquery $(this)

【发布时间】：2013-12-24 05:46:12

【问题描述】：

我有一个 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="..." 短语，我想在我的js 文件中拥有一个时尚的$(document).on('click', 'a', function() ... ); 函数。但是如何在我的$(document).on... 函数中放置一个$(this) 选择器呢？我需要这个disable 我的a href 按钮，而且我有很多，所以硬编码ids 或类似的东西真的很难完成。

【问题讨论】：

jQuery 库确保this 引用被单击的<a> 元素。你不必做任何特别的事情；这就是它的工作原理。

啊...不知道这个事实。我会试试看。但是我怎样才能提供一个带有两个变量的$(document).on(...) 函数呢？或者这只是可能与onclick="..." 声明？

$(document).on('click', 'a', function() ... ) 将覆盖页面上的 any <a> 标记。当实际的“点击”事件发生时，实际涉及的<a> 标签将在调用您的处理程序时设置为this 的值。

您正在尝试将 $item_id 和 $user_id 传递给 javascript 函数？您可以为此创建自己的属性。例如，在 PHP 文件中，您可以添加 itemid="=$item_id;?>" 并在 js 函数中使用 $(this).attr("itemid");检索它。

它并不真正依赖于 html5。浏览器会将其渲染得很好，只是使其“无效”，这没有太多含义。你可以阅读更多here。我添加了一个答案以进一步澄清我的 cmets。

【参考方案1】：

如果您想在选择锚点时从许多 <a> 中实际定位当前的 <a>，请使用在 .on('click 上传递的 event)`：

<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>

Fiffle：http://jsfiddle.net/hM4kC/

虽然，我通常不会建议这样做。因为这只是一个示例，说明如何从许多结果中检索到的 jQuery 对象中选择 selected <a> 锚点（例如，当前页面将收集 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 信息时。

小提琴： http://jsfiddle.net/N99B6/3/

【讨论】：

感谢您的评论。我实际上是按类或 ID 选择的。我只是在***上选择了一般<a>作为示例

@JohnBrunner 哦！对不起！好吧，那么我想问题是关于使用$(this) 收集信息然后，我会使用.data() 或.attr() - Apolgoies =)

【参考方案2】：

PHP 文件

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

JS 文件

$(document).on('click', 'a', function()
    bootkmark_item(
        $(this).attr('itemid'),
        $(this).attr('userid'));
);
function bookmark_item(item_id, user_id);
    $(.btn-bookmark).attr('disabled','disabled');
    e.preventDefault();
    return false;
);