-2
Так что я занят созданием мини-интернет-магазин, и я использую передний конец Google (MDL) шаблон
То, что я хотел сделать в моем интернет-магазине есть, когда пользователь нажимает на x-продукт. Я хочу переключить класс,
Я использую замыкания внутри петель для обнаружения щелчков на любом продукте.
Моя единственная проблема - класс не переключается. Я пробовал использовать addClass, но это не так удобно, потому что я действительно хочу переключить класс (из выбранного продукта не выбрано)
Оформить заказ мой сниппет &, вы поймете, что увидите, что я правильно определяю клики , Но переключение классов не работает.
$(document).ready(function() {
\t console.log("Document ready");
for (var i = 1; i < $(".products").length; i++) {
\t \t (function(index){
\t \t $(".products").click(
\t \t \t function(e){
\t \t \t console.log("click successfull!");
\t console.log(this);
\t $(this).css("border", "1px solid #1976D2");
\t
\t $(this).toggleClass("mdl-shadow--16dp");
\t \t });
\t \t })(i);
\t }
\t $("#Card").keyup(function(event){
\t if(event.keyCode == 84){
\t console.log("Class toggled!");
\t $(".products").toggleClass("mdl-shadow--2dp mdl-shadow--16dp");
\t }
\t });
});.mdl-card__actions{
display: flex;
box-sizing:border-box;
align-items: center;
}
.page-content .mdl-card {
\t display: inline-block;
\t margin: 5px 5px 5px 5px; \t
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
\t <div class="page-content">
\t \t \t \t \t \t \t <!-- Your content goes here -->
\t \t \t \t \t \t \t <div class="mdl-card mdl-shadow--2dp products">
\t \t \t \t \t \t \t \t <div class="mdl-card__title">
\t \t \t \t \t \t \t \t \t <h2 class="mdl-card__title-text">Dell XP13 </h2>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t <img src="https://goo.gl/gDDH0i" alt="dell xp13">
\t \t \t \t \t \t \t \t <div class="mdl-card__supporting-text"><b>Basisprijs: 1.649,00$<b></div>
\t \t \t \t \t \t \t \t <div class="mdl-card__actions mdl-card--border">
\t \t \t \t \t \t \t \t \t <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
\t \t \t \t \t \t \t \t \t \t Add to cart
\t \t \t \t \t \t \t \t \t </a>
\t \t \t \t \t \t \t \t \t <div class="mdl-layout-spacer"></div>
\t \t \t \t \t \t \t \t \t <i class="material-icons">add_shopping_cart</i>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div> \t \t
\t \t \t \t \t \t \t <div class="mdl-card mdl-shadow--2dp products">
\t \t \t \t \t \t \t <div class="mdl-card__title">
\t \t \t \t \t \t \t \t <h2 class="mdl-card__title-text">Chromebook pixel2</h2>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <img src="https://goo.gl/pNie9C.png" alt="chrombook">
\t \t \t \t \t \t \t <div class="mdl-card__supporting-text"><b>Basisprijs: 999,99$<b></div>
\t \t \t \t \t \t \t <div class="mdl-card__actions mdl-card--border">
\t \t \t \t \t \t \t \t <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
\t \t \t \t \t \t \t \t \t Add to cart
\t \t \t \t \t \t \t \t </a>
\t \t \t \t \t \t \t \t <div class="mdl-layout-spacer"></div>
\t \t \t \t \t \t \t \t \t <i class="material-icons">add_shopping_cart</i>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="mdl-card mdl-shadow--2dp products">
\t \t \t \t \t \t \t <div class="mdl-card__title">
\t \t \t \t \t \t \t \t <h2 class="mdl-card__title-text">Macbook 13'</h2>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <img src="https://goo.gl/qzq0Cr" alt="Macbook">
\t \t \t \t \t \t \t <div class="mdl-card__supporting-text"><b>Basisprijs: 1.129,00$<b></div>
\t \t \t \t \t \t \t <div class="mdl-card__actioder">
\t \t \t \t \t \t \t \t <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
\t \t \t \t \t \t \t \t \t Add to cart
\t \t \t \t \t \t \t \t </a>
\t \t \t \t \t \t \t \t <div class="mdl-layout-spacer"></div>
\t \t \t \t \t \t \t \t \t <i class="material-icons">add_shopping_cart</i>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
</body>Я покажу вам эффект я переключаясь в отдельной ссылке, в этом link я переключая эффект для всех «дивы» Но я не буду его за клик.
Я зациклился на них, потому что так я достиг чего-то подобного в другом проекте, где я бы взял innerHTML щелкнутого элемента. Но я определенно недооценил, как я должен был это достичь, спасибо за отредактированный фрагмент, я понимаю, что я мог бы сделать это намного проще. Его просто путают меня, что CSS-границы работали, но toggleClass() этого не делал. – Abdel
Ну, я думаю, вы неправильно поняли, как работает '.click (...)' прослушиватель. Как я уже говорил, нет необходимости прокручивать каждую кнопку, потому что, как уже сказано, это событие ** слушатель **. Так что, как всегда, вы ожидаете, когда ваше взаимодействие начнет работать с обработчиком, особенно если у вас больше кнопок с одинаковым классом, слушатель будет запущен, как только один из них будет нажат, независимо от того, какой из них какой класс, идентификатор или другой атрибут связан с слушателем) –
Да, вы абсолютно правы в том, что я неправильно понял, как работает слушатель. Читая этот вопрос через 5 недель после того, как я спросил его, я чувствую себя очень не обращать внимания, я все понимаю сейчас, спасибо, что потратил время, объясняя и демонстрируя, как это работает. Я использую его сейчас. – Abdel