Jquery AJAX id 选择器并发布更改类

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 发布数据 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;
}