jQuery If is set, or if is not null?

Question

I have the following jQuery Code:

$("#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) {

    }

};

But it is a little glitchy. Is there an alternative I can use to see if this data attribute exists? Instead of using if (url) { }

My HTML will be something like this:

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

So not everyone will have all of the data attributes.

---

Edit: How do I clear everything once the span is clicked again?

For example:

if (data.mobile) {

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

}

So by default, the class is loaded with icon mobile off. Then when the span is clicked, it runs through the functions, and if it has mobile assigned to it, then it will turn the class to icon mobile on which is perfect for the first view. But then when I go to another span and it does not have a mobile, it still stays ON from before. How can I clear stuff like that on each new click?

<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

Since you are using data attributes you can use jQuery data() method to there values and optimize your code something like this.

$("#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) {
    }
};

If there are multiple span the you can use delegate on the #menu and look for span, this way the click handler will be attached only once on #menu element. Try this.

$("#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) {
    }
};

Update based on OP's comment:

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