Установить отображение элемента с помощью .each () в jQuery

Question

Установить отображение элемента с помощью .each () в jQuery

И FYI , по-видимому, , последняя версия магазина Amazon окончательно устанавливает PackageManager.getInstallerPackageName() на "com.amazon.venezia", а также контрастирует с Google Play "com.android.vending".

0

jquery

задан R K 25 February 2019 в 00:16

2 ответа

Другие вопросы по тегам:

jquery

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

score 0 · Answer 1

Используя $(this).css("display", "block"), вы устанавливаете свойство display на block. Если вы хотите проверить значение свойства, вместо этого вам нужно использовать if ($(this).css("display") === "block") или if ($(this).is(":visible")), если вы не смотрите на конкретное значение block. Более подробную информацию о JQuery.css() можно найти здесь здесь :

$("#myBtn").click(function(e)
{
    e.preventDefault();

    var allCategories = document.getElementsByClassName("ProductList");

    $(allCategories).each(function()
    {
        if ($(this).css("display") === "block")
            $(this).css("display", "none");
    });
});

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

<div class="ProductList">P1</div>
<div class="ProductList">P2</div>
<div class="ProductList">P3</div>
<button id="myBtn">Hide All!</button>

Однако, ваш Для простоты код можно сократить до следующего, если вы хотите скрыть видимые элементы с помощью класса .ProductList (при условии, что вы не смотрите на конкретное значение block для свойства display):

[ 1128]

$("#myBtn").click(function(e)
{
    e.preventDefault();
    $(".ProductList:visible").hide();
});

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

<div class="ProductList">P1</div>
<div class="ProductList">P2</div>
<div class="ProductList">P3</div>
<button id="myBtn">Hide All!</button>

<час>

Редактировать после обновления вопроса:

Еще одно решение для вас , может использовать атрибуты data-target для элементов, где вы регистрируете обработчик click, например:

$(document).ready(function()
{
    $(".ProductList").hide();
    
    $(".col-sm-4.rowitem").click(function(e)
    {
        $('.ProductList').hide();
        var target = $(this).data("target");
        $(target).show();
    });
});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container-fluid">

<div class="row">
  <div class="col-sm-4 rowitem" id="Snacks" data-target="#SnacksList">
    <a href="#">
      <img src="https://via.placeholder.com/50?text=Snacks"/>
    </a>
  </div>
  <div class="col-sm-4 rowitem" id="Baby" data-target="#BabyList">
    <a href="#">
      <img src="https://via.placeholder.com/50?text=Baby"/>
    </a>
  </div>
  <div class="col-sm-4 rowitem" id="Perfumes" data-target="#PerfumesList">
    <a href="#">
      <img src="https://via.placeholder.com/50?text=Perfumes"/>
    </a>
  </div>
</div>

<div class="row">
  <div class="ProductList" id="SnacksList">
    Snacks List
  </div>
  <div class="ProductList" id="BabyList">
    Baby list
  </div>
  <div class="ProductList" id="PerfumesList">
    Perfumes List
  </div>
</div>

</div>

score 0 · Answer 2

После обновления комментариев и OP необходимо использовать $('.ProductList').hide().filter("#" + id + "List").show()

$(".col-sm-4.rowitem").click(function (e) {
    var id = this.id;
    $('.ProductList').hide().filter("#" + id + "List").show()
});

.ProductList{
  display : none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4 rowitem" id="Snacks">
    <a href="#">
        <img src="~/XImages/snacks.png" />
    </a>
</div>
<div class="col-sm-4 rowitem" id="Baby">
    <a href="#">
        <img src="~/XImages/baby.png" />
    </a>
</div>
<div class="col-sm-4 rowitem" id="Perfumes">
    <a href="#">
        <img src="~/XImages/perfumes.png" />
    </a>
</div>

<div class="ProductList" id="SnacksList" >
    Under construction Snacks
</div>
<div class="ProductList" id="BabyList">
    Under construction Baby
</div>
<div class="ProductList" id="PerfumesList" >
    Under construction Perfumes
</div>