Question

这样我就可以在不离开页面的情况下更改照片类别。它工作。

下一步 - 照片的预定义类别有一个绿色背景的按钮，另外两个有红色。在做出新选择时，我希望按下的按钮变为绿色，并且该照片的其他两个按钮变为/保持红色。绿色css是c_on，红色css是c_off。

如何使用javascript / ajax / jquery将右侧css设置为右侧按钮？

任何帮助非常感谢。（样式在我的代码中正确定义，但我无法将其正确粘贴到此处，因此我使用了注释）。

JS：

<script type="text/javascript">
$(function () {
$('form').on('submit', function (e) {
    $.ajax({
        type: 'post',
        url: "test_ajax_update_code.php",
        data: $(this).serialize(),
        });
    e.preventDefault();
    });
});
</script>

CSS：

.c_on {color: #000;background-color:#F00;}
.c_off {color: #000;background-color:#0F0;}

HTML：

<img src="myfoto1.jpg" width="500" height="333" border="0"><br>
            <form id="form1">
            <input name="num" type="hidden" value="1373" >
            <input name="shw" type="hidden" value="1" >
            <input type="submit" value="1" class="c_on">
            </form>
            &nbsp;&nbsp;&nbsp;
            <form id="form2">
            <input name="num" type="hidden" value="1373" >
            <input name="shw" type="hidden" value="2" >
            <input type="submit" value="2" class="c_off">
            </form>
            &nbsp;&nbsp;&nbsp;
            <form id="form3">
            <input name="num" type="hidden" value="1373" >
            <input name="shw" type="hidden" value="3" >
            <input type="submit" value="3" class="c_off">
            </form>
        <img src="myfoto2.jpg" width="500" height="333" border="0"><br>
            <form id="form1">
            <input name="num" type="hidden" value="1374" >
            <input name="shw" type="hidden" value="1" >
            <input type="submit" value="1" class="c_off">
            </form>
            &nbsp;&nbsp;&nbsp;
            <form id="form2">
            <input name="num" type="hidden" value="1374" >
            <input name="shw" type="hidden" value="2" >
            <input type="submit" value="2" class="c_on">
            </form>
            &nbsp;&nbsp;&nbsp;
            <form id="form3">
            <input name="num" type="hidden" value="1374" >
            <input name="shw" type="hidden" value="3" >
            <input type="submit" value="3" class="c_off">
            </form>

Answer 1

您可以按照以下方式执行此操作：

$(function () {
$('form').on('submit', function (e) {
    $.ajax({
        type: 'post',
        url: "test_ajax_update_code.php",
        data: $(this).serialize(),
    });

    // set all buttons to c_off
    $('input[type="submit"]').removeClass('c_on').addClass('c_off');

    // set the submitted one to c_on
    $(this).find('input[type="submit"]').removeClass('c_off').addClass('c_on');

    e.preventDefault();
    });
});

这会使您的代码看起来如下：

$ cf app <app-name> --guid
2836d5fe-35f7-4409-b27b-4ed308152bb4
$ cf curl /v2/apps/2836d5fe-35f7-4409-b27b-4ed308152bb4/droplet/download > my-droplet

Answer 2

我发现很难理解你的意思，但是对于一些事件和布尔，你应该可以做这样的事情相当容易。

var image_1 = false

if (image_1 === true) {
    //change button styles
}

var element = getElement('div.image') // example

element.addEventListener('click', function () {
    image_1 = true'
}

并且甚至不会涉及任何ajax。例如，当一切都是真的时，你可以提交。

Answer 3

希望这有帮助

$('input:submit').on('click',function(){
   $('input:submit').removeClass('c_on').addClass('c_off');
   $(this).removeClass('c_off').addClass('c_on');
})

Answer 4

您应该为每个按钮添加一个点击事件，这样您就可以删除任何.c_on类，并将其应用于点击的按钮。

$('input[type="submit"]').on('click', function () {
    $(".c_on").removeClass('c_on').addClass('c_off');
    $(this).removeClass('c_off').addClass('c_on');
}}

Answer 5

尝试此解决方案并检查[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd HH:mm:ss}")]是否有合适的颜色。

<强>更新

CSS必须是唯一的。因此，我已将id的{{1}}更改为id。
然后我添加了新的forms属性来区分按钮组。

更新了代码段：

class

data-image

$(function() {
  $('form').on('click', 'input[type="submit"]', function(e) {
    $.ajax({
      type: 'post',
      url: "test_ajax_update_code.php",
      data: $(this).parent().serialize(),
    });
    var clicked = $(this),
      imageName = clicked.data("image");
    clicked.removeClass("c_off").addClass("c_on");
    $('input[type="submit"]').each(function() {
      var self = $(this);
      if (!clicked.is(self)) {
        if (self.hasClass("c_on") && imageName == self.data("image"))
          self.removeClass("c_on").addClass("c_off");
      }
    });
    e.preventDefault();
  });
});

无需离开页面即可更改按钮的颜色

5 个答案: