Skip to content Skip to sidebar Skip to footer

Find Specific Anchor Tag And Replace Data Atribute On Click

I have following page structure

Solution 2:

I believe the following should work (un-tested):

var dataPlay = $(".playing a.article-play").data("play");
var dataPause = $(".playing a.article-play").data("pause");

if (dataPlay == "3") {
    $(".playing a.article-play").removeAttr("data-play").attr("data-pause", "4");
} else if (dataPause == "4") {
    $(".playing a.article-play").removeAttr("data-pause").attr("data-play", "3");
}

Solution 3:

var a = $("article.playing a.article-play")
a.each(function(){
    var playAttr = $(this).attr("data-play")
    var pauseAttr = $(this).attr("data-pause")
    if(playAttr){
        if(playAttr == "4"){
            $(this).removeAttr("data-play");
            $(this).data("pause",3);
        }
    }
    if(pauseAttr){
        if(pauseAttr == "3"){
            $(this).removeAttr("data-pause");
            $(this).data("play",4);
        }
    }
});

Solution 4:

I think you can separate the method that handles pause from the method that handles play

simplified HTML

<div class="playing">
    <div id="output"></div> 

    <a href="#" class="article-play" data-play="4">click</a>

</div>

JS

$(".playing").on("click", ".article-play[data-pause]", function () {
    $(this).removeAttr("data-pause");
    $(this).attr("data-play", 4);

    $("#output").text("playing 4");
});

$(".playing").on("click", ".article-play[data-play]", function () {
    $(this).removeAttr("data-play");
    $(this).attr("data-pause", 3);

    $("#output").text("pausing 3");
});

jsFiddle

This answer is based on the answers I received to the question I asked while trying to implement this solution


Post a Comment for "Find Specific Anchor Tag And Replace Data Atribute On Click"