In diesem Code, in dem mit jedem Klick auf .clone neue Sätze von .options erstellt werden, möchte ich die Klasse focus nur dem angeklickten button jedes Elements hinzufügen können Entfernen Sie anschließend die Klasse focus aller nicht angeklickten Schaltflächen. Ich kann die Klasse focus nicht auf alle nicht angeklickten Schaltflächen entfernen.

Beachten Sie, dass das HTML- und das JQuery-Markup gleich bleiben müssen, da es eine Komponente einer größeren Funktion vor Ort ist.

var uniqueId = 1;
$(function() {
  $(".btn--new").click(function() {
    var copy = $("#s_item").clone(true, true);
    var formId = "item_" + uniqueId;
    copy.attr("id", formId);
    $("#s_list").append(copy);
    $("#" + formId)
      .find(".options")
      .each(function() {
        var list = $(this);
        $("[data-type='studio']").click(function() {
          list.find(this).removeClass("focus");
          $(this).addClass("focus");
        });

        var $catoptions = $(this).find(".button"),
          catrandom = ~~(Math.random() * $catoptions.length);
        $catoptions.eq(catrandom).click();
      });
    uniqueId++;
  });
});
$(document).ready(function() {
  $(".btn--new").trigger("click");
  $(".btn--new").trigger("click");
  $(".btn--new").trigger("click");
});
#s_item {
  display: none;
}

.options {
  display: flex;
}

.focus {
  color: green;
  font-weight: 900
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn--new">Clone</button>
<div id="s_list">
  <div class="post__item studio__item" action="" id="s_item">
    <div class="options">
      <button type="button" class="button" data-type="studio">Dog</button>
      <button type="button" class="button" data-type="studio">Cat</button>
      <button type="button" class="button" data-type="studio">Bird</button>
    </div>
  </div>
</div>
0
Kyle Underhill 7 Feb. 2020 im 18:06

3 Antworten

Beste Antwort

Du meinst so?

Aktualisierte Demo: https://jsfiddle.net/nd1owcmk/

Fügen Sie einfach einen Satz Skript hinzu, ohne den Code zu ändern. Dadurch wird die Fokusklasse der Schaltfläche zum Deaktivieren entfernt.

$(".button").click(function() {
    $(this).addClass("focus").siblings().removeClass('focus');
});

JQuery

var uniqueId = 1;
$(function() {
  $(".btn--new").click(function() {
    var copy = $("#s_item").clone(true, true);
    var formId = "item_" + uniqueId;
    copy.attr("id", formId);
    $("#s_list").append(copy);
    $("#" + formId)
      .find(".options")
      .each(function() {
        var list = $(this);
        $("[data-type='studio']").click(function() {
          list.find(this).removeClass("focus");
          $(this).addClass("focus");
        });

        var $catoptions = $(this).find(".button"),
          catrandom = ~~(Math.random() * $catoptions.length);
        $catoptions.eq(catrandom).click();
      });
        uniqueId++;
  }); 

  $(".button").click(function() {
    $(this).addClass("focus").siblings().removeClass('focus');
  });

});

$(document).ready(function() {
  $(".btn--new").trigger("click");
  $(".btn--new").trigger("click");
  $(".btn--new").trigger("click");
});
1
yeyene 11 Feb. 2020 im 01:31

In der Funktion document.ready muss ich die Anzahl der Triggerelemente ermitteln und sie dann in einem localstorage speichern. Wenn ich dieses localstorage -Element mit der if-Bedingung verwende, habe ich den Fokus entfernt.

Ich hoffe das hilft dir.

var uniqueId = 1;
$(function() {
  $(".btn--new").click(function() {
    var copy = $("#s_item").clone(true, true);
    var formId = "item_" + uniqueId;
    copy.attr("id", formId);
    $("#s_list").append(copy);

    $("#" + formId)
      .find(".options")
      .each(function() {
        var list = $(this);
        $("[data-type='studio']").click(function() {
          list.find(this).removeClass("focus");
          $(this).addClass("focus");
        });

        var $catoptions = $(this).find(".button"),
          catrandom = ~~(Math.random() * $catoptions.length);
        $catoptions.eq(catrandom).click();
      });
    if (uniqueId > 3) {
      //localStorage.getItem("triggered")
      $("#" + formId + ' .button').removeClass('focus');
    }
    uniqueId++;
  });
});
$(document).ready(function() {
  $(".btn--new").trigger("click");
  $(".btn--new").trigger("click");
  $(".btn--new").trigger("click");
  //localStorage.setItem("triggered", ($('#s_list .post__item ').length) - 1);
});
#s_item {
  display: none;
}

.options {
  display: flex;
}

.focus {
  color: green;
  font-weight: 900
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn--new" data-clone='true'>Clone</button>
<div id="s_list">
  <div class="post__item studio__item" action="" id="s_item">
    <div class="options">
      <button type="button" class="button" data-type="studio">Dog</button>
      <button type="button" class="button" data-type="studio">Cat</button>
      <button type="button" class="button" data-type="studio">Bird</button>
    </div>
  </div>
</div>
0
vadivel a 10 Feb. 2020 im 11:35

Um dies zu erreichen, müssen Sie einfach removeClass('focus') aufrufen, um es aus allen vorherigen Elementen zu entfernen, wenn Sie die Klasse für das zuletzt angeklickte Element festlegen.

Beachten Sie auch, dass Sie Ihren Code vereinfachen und austrocknen können, indem Sie allgemeine Klassen anstelle von zur Laufzeit generierten id Attributen (die im Allgemeinen als Anti-Pattern angesehen werden) verwenden und auch delegierte Ereignishandler verwenden. Versuche dies:

$(function() {
  let $list = $('#list');
  
  $(".clone").click(function() {
    let $clone = $('.item:first').clone();
    $clone.find('.focus').removeClass('focus red blue');
    $clone.appendTo($list);
  });
  
  $list.on('click', '.options button', function() {
    $('.focus').removeClass('focus red blue');
    var $button = $(this);
    $button.addClass('focus ' + $button.data('color'));
  });
});
#s_item { display: none; }
.category__list { display: flex; }
.focus { color: white; }
.blue { background-color: blue; }
.red { background-color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="clone">Clone</button>

<div id="list">
  <div class="item">
    <div class="options">
      <div class="category__item">
        <div class="input--studio">
          <button type="button" class="button" value="blue" data-filter="blue" data-rel="blue" data-type="item" data-color="blue">Blue</button>
        </div>
      </div>
      <div class="category__item">
        <div class="input--studio">
          <button type="button" class="button" value="red" data-filter="red" data-rel="red" data-type="item" data-color="red">Red</button>
        </div>
      </div>
    </div>
  </div>
</div>
1
Rory McCrossan 7 Feb. 2020 im 15:16