jQuery If is set, or if is not null?
<p>I have the following jQuery Code:</p>

<pre><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) {

    }

};
</code></pre>

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

<p>My HTML will be something like this:</p>

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

<p>So not everyone will have all of the data attributes. </p>

<hr>

<p><strong>Edit:</strong> How do I clear everything once the span is clicked again?</p>

<p>For example:</p>

<pre><code>if (data.mobile) {

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

}
</code></pre>

<p>So by default, the class is loaded with <code>icon mobile off</code>.  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 <code>icon mobile on</code> 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?</p>

<pre><code>&lt;div class="icons"&gt;
    &lt;div class="icon website off" data-link=""&gt;&lt;/div&gt;
    &lt;div class="icon mobile off" data-link=""&gt;&lt;/div&gt;
    &lt;div class="icon fb off" data-link=""&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
