javascript - jQuery $(this).addClass 不起作用

Question

我有一个文本框列表，用户可以在其中放置字母，但是当在文本框中放置错误的字母时，我想addClass("dan​​ger") 我只想在错误的字母文本框我还附上了屏幕截图来说明问题。

文本框有一个分配了名称为 box 的类。

现在我的放置函数如下所示。

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

但是，这不起作用，我只想将 danger 类添加到丢弃错误值的框中。

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

任何帮助将不胜感激!

这是 jQuery UI 拖放功能，运行良好:

        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");
        }

                    }
});

这是回显文本框数量的 PHP 代码:

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

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

        }

Answer 1

当您将 ondrop 事件嵌入到输入标记中时，您只是在运行一个函数。

因此，不要嵌入它，而是尝试使用 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");
    }
})

太棒了，它帮助了你:)

干杯，