Обновлять стоимость динамического класса

У меня есть таблица, которая производит серию кнопок dinámicamente, где нажав на один из них, меня изменяет текст. Текст изменяется правильно кнопки, которую я изменяю, но не цвета, так как я изменяюсь во всех.

Какая проблема есть с классом? Это код php:

    while($row = mysqli_fetch_assoc($result))
    {
        $status = $row['register_status'];
        if ($status == "Active") {
            $register_status = '<button class="btn btn-success btn_status btn-block" data-status="Active">Active</button>';
        }
        else {
            $register_status = '<button class="btn btn-warning btn_status btn-block" data-status="Inactive">Inactive</button>';
        }
        $data .= '<tr>
                        <td width="1%"><mark>#'.$row['id'].'</mark></td>
                        <td>'.$row['first_name'].'</td>
                        <td>'.$row['last_name'].'</td>
                        <td>'.$row['email'].'</td>
                        <td width="1%">'.$register_status.'</td>
                        <td width="1%">

На уровне jQuery у меня есть следующее:

jQuery(document).ready(function(){
  $('body').click('.btn_status', function(e){
  var button = jQuery(e.target);
  if(button.data('status') == 'Active'){
          button.data('status', 'Inactive');
          button.html('Inactive');
          //$(".btn_status").removeClass("btn-success").addClass("btn-warning");
        button.removeClass("btn-success").addClass("btn-warning");
        }else if(button.data('status') == 'Inactive'){
          button.data('status', 'Active');
          button.html('Active');
          //$(".btn_status").removeClass("btn-warning").addClass("btn-success");
        button.removeClass("btn-warning").addClass("btn-success");

        }
  });
})

Моя структура файлов - та следующие:

index.php: carga de css, scripts, jquery y funciones (onclick)
ajax/readRecords.php: generación de la tabla
js/script.js: funcion onclick
js/jquery.js: jquery

Проблема состоит в том, что меня изменяет цвет кнопки, которую я выбираю, но также оставшейся части. Я интуитивно чувствую, что стоимость класса теряется...

Что последует за ним в removeClass/addClass для того, чтобы он изменил это мне во всех кнопках и не только в тому, который нажал?

0
задан 01.07.2019, 13:48
3 ответа

Я добавляю пример, ты можешь видеть результат давая click в bot¦n Выполнять , функционируй правильно, Â: Ты имеешь по отношению к твоему apicaci¦n bootstrap 3 или 4 , добавленный?, должен будь быть в начало твоего html.

$(document).ready(function(){

		$(".btn_status" ).on( "click", function() {

			var button = $(this);
			if(button.data('status') == 'Active'){
				button.data('status', 'Inactive');
				button.html('Inactive');
				button.removeClass("btn-success").addClass("btn-warning");
			}else if(button.data('status') == 'Inactive'){
				button.data('status', 'Active');
				button.html('Active');
				button.removeClass("btn-warning").addClass("btn-success");
			}
			
		});

})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<button class="btn btn-success btn_status btn-block" data-status="Active">Active</button>

<button class="btn btn-warning btn_status btn-block" data-status="Inactive">Inactive</button>

<button class="btn btn-success btn_status btn-block" data-status="Active">Active</button>

<button class="btn btn-warning btn_status btn-block" data-status="Inactive">Inactive</button>

<button class="btn btn-success btn_status btn-block" data-status="Active">Active</button>

<button class="btn btn-warning btn_status btn-block" data-status="Inactive">Inactive</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Секрет здесь $ (" .btn_status") .on ("click", function () { {119], событие всегда estarÃ: я включаю, даже существовали так называемые асинхронные ajax.

1
ответ дан 11.11.2019, 04:03
  • 1
    если... у меня есть bootstrap 3 в моем index.php: <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/> – Guif If 01.07.2019, 13:32
  • 2
    ¿ có я говорю, что я послал, оно не функционирует?, из-за которого это тот же самый, что у тебя есть в có я говорю вопроса, ¿ ты смог тестировать ejmplo?, botó n Выполнять – Kamousagi 01.07.2019, 13:35
  • 3
    если. твой có я говорю, что оно функционирует. Я это протестировал и существую añ adido другой botó n editá ndolo и tambié n функционируй, но в mí или нет. Что podrí чтобы смотреть больше? – Guif If 01.07.2019, 13:38
  • 4
    функционируй спасибо! у него была проблема с закоулком...! – Guif If 03.07.2019, 09:16
  • 5
    Превосходный, añ adiendo немного больше помощи, ты можешь загружать браузер (chrome) новым закоулком с контролем + F5, или вводить в devtools (F12) идти к Network и, выводить из строя check Disable разбило , чтобы предотвращать хранение в стадии строительства закоулка. – Kamousagi 03.07.2019, 09:41

Проблема состоит в том, что ты перемещаешь во всем классе. Чтобы добиваться того, что ты хочешь, ты должен делать это прямо в кнопке, которую ты хочешь. Так:

button.removeClass("btn-success").addClass("btn-warning");
2
ответ дан 11.11.2019, 04:03
  • 1
    обновленный post. Я существую añ adido линия segú n случай, но продолжи красить все кнопки в часть того, который нажал – Guif If 01.07.2019, 13:19

Он мне кажется, что проблема estÃ: в этом l¦-nea

$(".btn_status").removeClass("btn-success").addClass("btn-warning");

Deber¦, - который должен быть as¦-.

button.removeClass("btn-success").addClass("btn-warning");

2
ответ дан 11.11.2019, 04:03
  • 1
    обновленный post. Я существую añ adido линия segú n случай, но продолжи красить все кнопки в часть того, который нажал – Guif If 01.07.2019, 13:18

Теги

Похожие вопросы