Итак, у меня есть кнопка с id = "one", и я установил: активный селектор этой кнопки

#one{
  background:#00cc00;
}
#one:active{
  background:#00ff00;
}

Теперь я запускаю вышеуказанную кнопку с помощью другой кнопки, но она не активирует селектор: active

 $("#startBtn").on("click", function() {

    $("#one").trigger("click");

  });

Что я должен сделать для запуска: активный селектор? Я уже связал событие click для класса, который содержит кнопку

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

    var id = $(this).attr("id");
    new Audio(audio[mainIndex[id]]).play();

  });

Таким образом, звук воспроизводится с событием .trigger, но селектор: Active не срабатывает.

0
Ayush Goyal 6 Янв 2017 в 09:50

4 ответа

Лучший ответ

События jQuery не запускают псевдоселекторы CSS (фокус, наведение и т. д.).

Если вы хотите изменить цвет другой кнопки, вам нужно будет либо установить стиль, либо добавить класс с нужным вам стилем:

#one{
  background:#00cc00;
}
#one.active{
  background:#00ff00;
}

$("#startBtn").on("click", function() {
    $("#one").addClass("active");
    $("#one").trigger("click");
});
2
Steve 6 Янв 2017 в 06:57

Попробуй это

$("#one").on("click", function() {
  console.log("Clicked One");
});
$('#startBtn').mousedown(function() {
  $("#one").addClass('active').trigger("click");
}).mouseup(function() {
  $("#one").removeClass('active');
});
#one {
  background: red;
}
#one:active {
  background: #00ff00;
}
.active {
  background: #00ff00 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="startBtn">start</button>
<button id="one">one</button>
0
Krupesh Kotecha 6 Янв 2017 в 07:21

Вам необходимо связать событие, прежде чем запускать его. Как это:

 $("#one").on("click", function() {
     alert("Button click triggered");
 });
 $("#startBtn").on("click", function() {
     $("#one").trigger("click");
 });
0
Krunal 6 Янв 2017 в 06:53

:active - это состояние взаимодействия. Я бы попробовал это, используя :focus

$("#startBtn").on("click", function() {
    $("#one").trigger('focus');
  });
#one{
  background:#00cc00;
}
#one:focus{
  background:#00ff00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input type="button" id="startBtn" value="startBtn">
<input type="button" id="one" value="one">
0
Developer 6 Янв 2017 в 07:01