Question

我有以下jQuery代码：

$("#menu span").click(function() {
    var url = this.getAttribute("data-url");
    var mobile = this.getAttribute("data-mobile");
    var facebook = this.getAttribute("data-facebook");

    if (url) {

    }

    if (mobile) {

    }

    if (facebook) {

    }

};

但这有点小问题。有没有我可以用来查看这个数据属性是否存在的替代方案？而不是使用if (url) { }

我的HTML将是这样的：

<ul>
    <li><span data-mobile="1" data-url="http://url.com">Site #1</span></li>
    <li><span data-url="http://site2.com" data-facebook="http://fblink">Site #2</span></li>
    <li><span data-url="http://site3.com">Site #3</span></li>
</ul>

因此，并非所有人都拥有所有数据属性。

修改：再次点击范围后，如何清除所有内容？

例如：

if (data.mobile) {

    $(".mobile").attr("data-link", data.mobile);
    $(".mobile").attr('class', 'icon mobile on');

}

因此，默认情况下，该类加载了icon mobile off。然后，当单击跨度时，它会遍历函数，如果已分配了移动函数，则它会将类转换为icon mobile on，这对于第一个视图来说是完美的。但是当我进入另一个跨度并且它没有移动设备时，它仍然保持打开状态。如何在每次新点击时清除类似内容？

<div class="icons">
    <div class="icon website off" data-link=""></div>
    <div class="icon mobile off" data-link=""></div>
    <div class="icon fb off" data-link=""></div>
</div>

Answer 1

由于您使用的是data属性，因此可以使用jQuery data()方法对值进行优化并优化代码。

$("#menu span").click(function() {
    var data = $(this).data();//Will get all data attribute as key/value pairs
    if (data.url) {
    }
    if (data.mobile) {
    }
    if (data.facebook) {
    }
};

如果有多个span，您可以delegate使用#menu并查找span，这样click处理程序只会附加一次在#menu元素上。试试这个。

$("#menu").delegate('span', 'click', function() {
    var data = $(this).data();//Will get all data attribute as key/value pairs
    if (data.url) {
    }
    if (data.mobile) {
    }
    if (data.facebook) {
    }
};

根据OP的评论进行更新：

if (data.mobile) {
    $('.icons').attr("data-link", data.mobile)
    .removeClass('off').addClass('on');
}
else{
    $('.icons').removeAttr("data-link")
    .removeClass('on').addClass('off');
}

Answer 2

这样的事情：

var $spanObj = $("#menu span[data-url]").click(function() {
    var url = this.getAttribute("data-url");
    var mobile = this.getAttribute("data-mobile");
    var facebook = this.getAttribute("data-facebook");
    ...
    if (data.mobile) {
        $spanObj.filter('[data-mobile]').attr('class','icon mobile off');
        $(".mobile").attr("data-link", data.mobile);
        $(".mobile").attr('class', 'icon mobile on');

    }
});

仅选择包含data-url属性的spans开始。

jQuery如果设置，或者不是null？

2 个答案: