更改按鈕的顏色而不離開頁面

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

如下你可以這樣做：

// 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'); 

這將使您的代碼如下所示：

$(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(); 
    }); 
}); 

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

試試這個解決方案，並檢查CSS爲班級適當的顏色。

UPDATE：

1. id必須是唯一的。因此我已將forms的id更改爲class。
2. 然後我添加了新的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(); 
 
    }); 
 
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<img src="myfoto1.jpg" width="500" height="333" border="0"> 
 
<br> 
 
<form class="form1"> 
 
    <input name="num" type="hidden" value="1373"> 
 
    <input name="shw" type="hidden" value="1"> 
 
    <input type="submit" value="1" class="c_on" data-image="img1"> 
 
</form> 
 
&nbsp;&nbsp;&nbsp; 
 
<form class="form2"> 
 
    <input name="num" type="hidden" value="1373"> 
 
    <input name="shw" type="hidden" value="2"> 
 
    <input type="submit" value="2" class="c_off" data-image="img1"> 
 
</form> 
 
&nbsp;&nbsp;&nbsp; 
 
<form class="form3"> 
 
    <input name="num" type="hidden" value="1373"> 
 
    <input name="shw" type="hidden" value="3"> 
 
    <input type="submit" value="3" class="c_off" data-image="img1"> 
 
</form> 
 
<img src="myfoto2.jpg" width="500" height="333" border="0"> 
 
<br> 
 
<form class="form1"> 
 
    <input name="num" type="hidden" value="1374"> 
 
    <input name="shw" type="hidden" value="1"> 
 
    <input type="submit" value="1" class="c_off" data-image="img2"> 
 
</form> 
 
&nbsp;&nbsp;&nbsp; 
 
<form class="form2"> 
 
    <input name="num" type="hidden" value="1374"> 
 
    <input name="shw" type="hidden" value="2"> 
 
    <input type="submit" value="2" class="c_on" data-image="img2"> 
 
</form> 
 
&nbsp;&nbsp;&nbsp; 
 
<form class="form3"> 
 
    <input name="num" type="hidden" value="1374"> 
 
    <input name="shw" type="hidden" value="3"> 
 
    <input type="submit" value="3" class="c_off" data-image="img2"> 
 
</form>