jQuery If está establecido, o if no es nulo?

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?

Por ejemplo:

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>

preguntado el 30 de enero de 12 a las 19:01

2 Respuestas

Ya que estas usando 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) {
    }
};

Si hay varios span the you can use delegate al #menu y busca span, de esta manera el 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');
}

Respondido el 31 de enero de 12 a las 01:01

Awesome! I learned something new, thank you. I made one last edit to the question if you don't mind! - Dibujó

I can't get it to work :( I updated once again with the HTML I am using. The icon mobile off is in a new div. - Dibujó

Where is that div in the page? Is it for every span? - ShankarSangoli

No it is just shown once on the page. It is 3 icons, using CSS - and if it is set to off, then the background becomes less noticable, and when it is set to on it is bright and active. so every time a span is clicked and it has the data-mobile attribute, then that mobile icon should light up and get set to ON. when I go to another one, it should reset back to off, then check to see if data-mobile exists and either set to on or off. does that make sense? - Dibujó

Algo como esto:

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');

    }
});

Only select spans that contain the data-url attribute to begin with.

Respondido el 31 de enero de 12 a las 00:01

Hi, please see edit. I left out the rest. I need to be able to use it for all three. - Dibujó

Ah, ok. I would go with your current multiple if statement setup. As far as i can tell, it would be the most efficient, the only alternative is using .filter to filter to only spans that have atleast one of those data-attributes, but you will still need the if statements. - Kevin B

Or, you could use a separate click event for each case. - Kevin B

Awesome thanks so much. I made one more edit with another question if you don't mind! - Dibujó

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.