Tayyab Gulsher Vohra Tayyab Gulsher Vohra - 3 months ago 21
Javascript Question

jQuery $(this).addClass not working

I have a list of textboxes in which a user can drop a letter but when a wrong letter is dropped inside the textbox I want to

addClass("danger")
I want to addClass only on the wrong letter textbox I have also attached a screenshot to illustrate the problem.

demo

The textbox has a class with the name of
box
assigned.

Now my drop function is given below.

function dropabc(event) {

if ($(objBox).attr("correct1") != event.target.id) {

$(".imageError").fadeIn('slow').delay(1000).hide(0);
console.log("error");
$(this).addClass('danger');

} else {

console.log(event.target.id);
console.log("ok");
}
}

$(this).addClass("danger")


However, this is not working, I only want to add the
danger
class to the box on which a wrong value is dropped.

//makes all the textbox red
$(".box").addClass("danger")


Any help would be very appreciated!

This is the jQuery UI drag and droppable function which is working fine:

var objBox;
$('.drag').draggable({

revert: true,
helper: 'clone',
cursor: 'pointer',

start: function(event, ui) {

$(this).fadeTo('fast', 0.5);
objBox=$(this);
},
stop: function(event, ui) {
$(this).fadeTo(0, 1);
}
});

$("#textbox, .box").droppable({
hoverClass: "hoverPath",
drop: function(event, ui) {

var $this = $(this);
if ($this.val() == '') {
$this.val(ui.draggable.text());
$(this).addClass("checkDiv");
$(this).each(function(i, el){
$(el).addClass(myid[3]);
});

}

var empty = $(this).parent().find("input").filter(function() {
return this.value === "";
});
if(empty.length) {
console.log(empty.length);
}
else{
console.log("done");
}

}
});


This is the PHP code which is echo the number of textbox:

for($x = 0 ; $x < count($code_words); $x++){

echo "<input id='".$code_words[$x]."' ondrop='dropabc(event)' class='box' type='textbox'/>";

}

Answer

You're just running a function when you embed the ondrop event inside your input tag.

So instead of embedding it try using the jQuery on("drop").

$(document).on("drop", ".box", function(event){
      if ($(objBox).attr("correct1") != event.target.id) {

        $(".imageError").fadeIn('slow').delay(1000).hide(0);
        console.log("error");
        $(this).addClass('danger');

    } else {

        console.log(event.target.id);
        console.log("ok");
    }
})

Great it helped you :)

Cheers,

Comments