Question

我有一个问题。我正在尝试使用id创建一个ajax帖子，并尝试更改data-id选择的类。

我已经从 codepen.io

创建了 DEMO

在这个演示中，你可以看到有一个两个容器div，容器div在一些不同的颜色div中。

所以我想做什么。当我点击.change_pri时，点击（.style, style1, style2）会自动更改.type样式，如：

<div class="test" id="1">
  <div class="type style">selected color</div> <-- class is style
  <div class="select_types">
    <div class="type_s"><div class="change_pri style" data-id="0">0</div></div>
    <div class="type_s"><div class="change_pri style1" data-id="1">1</div></div>
    <div class="type_s"><div class="change_pri style2" data-id="2">2</div></div>
  </div>
</div>

单击change_pri style2后，它需要如下所示：

<div class="test" id="1">
  <div class="type style2">selected color</div> <-- after clicking class is style2
  <div class="select_types">
    <div class="type_s"><div class="change_pri style" data-id="0">0</div></div>
    <div class="type_s"><div class="change_pri style1" data-id="1">1</div></div>
    <div class="type_s"><div class="change_pri style2" data-id="2">2</div></div>
  </div>
</div>

并使用ajax发布data-id。

我不知道该部分的其余部分，但我能够这样做。在这方面，任何人都可以帮助我吗？

$(function() {
  var i;
  i = $(this).attr('id');
});
$('.change_pri').on('click', function(e) {
  e.preventDefault();
  $.ajax({
    type: "POST",
    url: "chage_number.php",
    data: {
      id: i,
    },
  });

});

Answer 1

带有AJAX请求的Javascript应该看起来像这样：

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

然后根据您要在后端执行的操作，您可以通过$_POST['id']在 chage_number.php 中访问该变量。

所以一个简单的例子就是

<强> chage_number.php

echo $_POST['id'] . ", ". $_POST['dataid'];

这应该是alert()两个ID。

Answer 2

你可以试试这个..

$('.change_pri').on('click', function(e) {
  var styletype = $(this).attr('class').split(' ')[1]; 
  var ctoremove = $('.type').attr('class').split(' ')[1];
  $('.type').removeClass(ctoremove).addClass(styletype);
  $.ajax({
        type: "POST",
        url: "chage_number.php",
        data: { id: i }
    }).success(function(result){
        alert(result);
    });
});

这是FIDDLE

Answer 3

我认为第二个容器应该是点击第一个容器的div的例子。

请参阅此工作示例，它应该按照您的要求执行：http://codepen.io/anon/pen/qdxVzW

您可以在此处收到提醒，告诉您点击了哪个数据ID，然后更改了.type元素的类

alert($(this).attr('data-id')); //this can be removed, it's just a test

$('#test-1 > .type')  //remove styleN and add the needed one
  .removeClass('style0')
  .removeClass('style1')
  .removeClass('style2')
  .addClass('style'+$(this).attr('data-id'))

关于ajax调用的部分几乎保持不变，在设置要发送的id时稍作修改：

$('.change_pri').on('click', function(e) {

  //As suggested by @Mackan, a little modification: store data-id
  var dataId = $(this).attr('data-id');

  $.ajax({
    type: "POST",
    url: "chage_number.php",
    data: {
    id: dataId //send the correct id
    }
  });
});

可以安全地删除脚本开头的函数，它不会影响代码的其余部分：）

我几乎忘了：在没有数字的样式中添加0，例如：

<div class="change_pri style0" data-id="0">0</div></div>

否则当它来到data-id=0时脚本不知道该怎么做。当然，同样的事情应该用于css代码：

.style0{
  background-color:red;
  color:#ffffff;
  margin:5px;
}

Jquery AJAX id选择器和更改类的帖子

3 个答案: