使用ajax将类添加到父div

时间:2017-07-15 15:25:06

标签: jquery css ajax

我想将类添加到父div,但我使用的是ajax,所以我不知道要定位正确的父级。这是我的代码:

function mark_watched(show, season, episode, path){
    $(function() {
        $.ajax({
            url: path,
            type: "POST",
            data: "show=" + show + "&season=" + season + "&episode=" + episode,
            success: function (result){
                if(result=="marked"){
                    $(".mark_watched").parent(".calendar_episode").addClass("ep_watched");
                }
                else if (result=="unmarked") {
                    $(".mark_watched").parent(".calendar_episode").removeClass("ep_watched");
                }
            },
        });
        return false;
    });                                     
}

我为我想要实现的目标创建了一个jsfiddle示例。请在此处查看:jsfiddle

问题是,在jsfiddle示例中,我可以使用关键字this来定位正确的复选框父级,但是在上面的ajax代码中,它定位所有具有类calendar_episode的父级div 。

我如何定位正确的?

1 个答案:

答案 0 :(得分:0)

您可能希望尝试将$(this)保存在变量中以便稍后使用。单击该按钮将在最后选择的项目上切换ep_watched类。

如果说A. Wolff的评论有效,那可能会更优雅。

<强> JS-小提琴

JS-Fiddle

<强> HTML

$(document).ready(function(){
    let selectedInput = null;
    $(".mark_watched").on("change", function() {
      selectedInput= $(this);    
    });
    $("button").click(function(){
            addEpWatched(); 
    });
function addEpWatched(){
 selectedInput.parent(".calendar_episode").toggleClass("ep_watched");
 }
});

<强> CSS

{{1}}

JS / jQuery

{{1}}