Изменить цвет кнопки, не выходя из страницы

Question

Это позволяет мне изменить категорию фотографий, не выходя из страницы. ОНО РАБОТАЕТ.

Следующий шаг - заданная категория фотографии имеет кнопку с зеленым фоном, а две другие имеют красный цвет. Когда вы делаете новый выбор, я хочу, чтобы нажатая кнопка загорелась, а две другие кнопки для этой фотографии превратились/оставались красными. Зеленый css - c_on, а красный css - c_off.

Как настроить правую кнопку css правой кнопкой мыши с помощью javascript/ajax/jquery?

Любая помощь очень ценится. (Стили определены правильно в моем коде, но я не мог заставить его вставить здесь правильно, поэтому я использовал комментарий).

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' 
} 

И даже не было бы никакого аякса. Например, вы можете представить, когда все верно.

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 должен быть уникальным. Поэтому я изменил idforms на 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>