javascript - 提取自定义参数

Question

有人有类似经历吗？我想在单击图像时获取自定义参数，而不仅仅是 id。我的第二个提醒 (this.ads) 未定义，如何从此参数获取数字 2？

HTML

<section id="home" data-role="page">
    <article data-role="content">
        <div id="home-content">Home Content here <a href="#tab-3" data-transition="slide">Goto Tab-3</a>
        <div id="tab-3-list">
            <div class="ui-grid-a">
                <div class="ui-block-a">
                    <img id="c02" ads="2" class="coupon_list" src="/images/coupon/c02.png">
                </div>
            </div>
            <!-- /ui-grid-a -->
        </div>
        <!-- /tab-3-list -->
        </div>
    </article>
    <!-- content -->
</section>
<!-- home -->

Javascript

$(document).ready(function () {
    $("#tab-3-list img.coupon_list").on("click", function (e) {
        e.preventDefault();
        alert(this.id);
        alert(this.ads);
    });

});

Answer 1

也许通过使用，

alert($(this).attr('ads'));

它将为您提供自定义属性的值。

编辑:添加自定义属性以供 JavaScript 使用

如果您想添加自定义属性只是为了自己的利益，例如在 HTML 元素中获取更多数据详细信息以供 JavaScript 进一步使用。

您可以使用data-属性。这会很容易也很简单。这是一个例子

<img data-abs="2" src="/images/coupon/c02.png" alt="coupon photo" />

现在，您可以使用.data()方法来获取值，http://api.jquery.com/data/ (用于数据方法的 jQuery API)。

以下是如何使用它

$('img').data('abs'); // output would be 2