Question

我在点击时有一个关于jquery的问题。

来自jsfiddle.net的 DEMO

当您单击演示时，您会看到有一个绿色和yellwo div。

问题是当您单击data-id="1"并更改此div类时：

<div class="icon-kr icon-globe"></div>

将icon-globe更改为icon-contacs

当您点击data-id="2"然后更改：

将icon-globe更改为icon-lock-1

同样认为是data-id="0" 我怎么能这样做，任何人都可以在这方面帮助我？ HTML

<div class="container" id="1">
    <div class="icon_ar"><div class="icon-kr icon-globe"></div>1</div>
    <div class="pr_type">
        <div class="type_s change_pri" data-id="0"><div class="icon-pr icon-globe"></div>1</div>
        <div class="type_s change_pri" data-id="1"><div class="icon-pr icon-contacs"></div>2</div>
        <div class="type_s change_pri" data-id="2"><div class="icon-pr icon-lock-1"></div>3</div>
    </div>
</div>

JS

$('.change_pri').click(function(){
    var dataid = $(this).attr('data-id');
    var id = $(this).closest('.container').attr('id');
    $.ajax({
        type: "POST",
        url: "chage_number.php",
        data: { dataid : dataid, id: id }
    }).success(function(result){
        alert(result);
    });
});

Answer 1

下面是一种方法。我只根据点击完成了课程更改位。我不确定你的ajax代码。如果您需要进一步的帮助，请告诉我。

$('.change_pri').click(function(){

    var class_name = $(this).find(".icon-pr").attr("class");
    class_name = class_name.replace(/icon\-pr\s+/gi, "");
    $(this).closest(".container").find(".icon-kr")
    .removeClass().addClass("icon-kr " + class_name);
});

Updated fiddle

Answer 2

您需要使用.data（），而不是正确访问数据。 https://api.jquery.com/jquery.data/

var dataid = $(this).data('id');

Answer 3

您正在错误地访问此data- *属性，使用此，

$('.change_pri').click(function(){
    var dataid = $(this).data('id');
        $(this).parent().siblings('.icon_ar').find('div').removeClass("icon-globe icon-contacs icon-lock-1");
        if(dataid=="0")
        {
             $(this).parent().siblings('.icon_ar').find('div').addClass("icon-globe");
        }
        else if(dataid==1)
        {
             $(this).parent().siblings('.icon_ar').find('div').addClass("icon-contacs");
        }
        else
        {
             $(this).parent().siblings('.icon_ar').find('div').addClass("icon-lock-1");
        }


//AJAX CODE.
    });

Jquery ajax更改了由data-id单击的类

3 个答案: