У меня есть два div на одной странице с одинаковым идентификатором. Я хочу изучить описание одного div. В моем случае, если я нажму на div, то все desc будут развернуты.

$(document).ready(function() {
  var collapsed = "image";

  $("#shw_desc").click(function() {
    if ($(".desc").is(":visible")) {
      $(".desc").slideUp();
      $("#shw_desc_icon img").attr("src", collapsed).css("transform", "rotate(0deg)");
    } else {
      $(".desc").slideDown();
      $("#shw_desc_icon img").attr("src", collapsed).css("transform", "rotate(180deg)");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="nt_selected">
  <span>Description</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
  <p>Some Description</p>
</div>

<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="nt_selected">
  <span>Description 2</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
  <p>Some Description 2</p>
</div>
0
Swanand 13 Янв 2017 в 14:01

3 ответа

Лучший ответ

У меня два div на одной странице с одинаковым идентификатором

Это неверно в HTML. Атрибуты id должны быть уникальными на странице. Измените разметку, чтобы вместо них использовать общий атрибут класса.

Оттуда вы можете использовать ключевое слово this для ссылки на элемент, вызвавший событие click, и найти связанные элементы, которые следует изменить.

Также обратите внимание, что вы можете упростить логику в своем коде JS, используя slideToggle() и toggleClass() над оператором if, и вы можете упростить HTML, поместив встроенные стили в таблицу стилей. Попробуй это:

$(document).ready(function() {
  var collapsed = "image";

  $(".shw_desc").click(function() {
    $(this).toggleClass('open').next('.desc').slideToggle();
    $(this).find(".shw_desc_icon img").attr("src", collapsed);
  });
});
.shw_desc {
  background-color: #dfdfdf;
  font-size: 14px;
  float: left;
  padding: 4px 12px;
  width: 90.3%;
  color: #666
}
.shw_desc_icon {
  float: right;
  transform: rotate(0deg);
}
.shw_desc.open .shw_desc_icon {
  transform: rotate(180deg);
}
.desc {
  display: none;
  border: 1px solid #eee;
  padding: 6px 12px;
  color: #999;
  font-size: 13px;
  width: 90%;
  float: left;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shw_desc nt_selected">
  <span>Description 1</span>
  <span class="shw_desc_icon glyphicon glyphicon-chevron-right">
    <img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block">
  </span>
</div>
<div class="desc">
  <p>Some Description 1</p>
</div>
<div class="shw_desc nt_selected">
  <span>Description 2</span>
  <span class="shw_desc_icon glyphicon glyphicon-chevron-right">
    <img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block">
  </span>
</div>
<div class="desc">
  <p>Some Description 2</p>
</div>
0
Rory McCrossan 13 Янв 2017 в 11:09

Или идея

$(document).ready(function() {
      var collapsed = "image";
    
      $(".meclick").click(function() {
      		var $box = $(this).parents('.box:first');
          if(!$box.find('.desc:first').hasClass('visible'))
          {
            $box.find('.desc:first').addClass('visible');
            $box.find('.desc:first').slideDown();
            $box.find('.desc:first').find("#shw_desc_icon img:first").attr("src", collapsed).css("transform", "rotate(0deg)");
          }
          else
          {
          	$box.find('.desc:first').removeClass('visible');
            $box.find('.desc:first').slideUp();
            $box.find('.desc:first').find("#shw_desc_icon img:first").attr("src", collapsed).css("transform", "rotate(180deg)");
          }
    
    
      });
    });
.visible{}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
    
    <div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="meclick nt_selected">
      <span>Description</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
    </div>
    <div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
      <p>Some Description</p>
    </div>
    
    </div>
    
    <div class="box">
    <div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="meclick nt_selected">
      <span>Description 2</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
    </div>
    <div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
      <p>Some Description 2</p>
    </div>
    </div>
0
Mohammad 13 Янв 2017 в 11:39

Идентификаторы должны быть уникальными и считаться недействительным HTML.

Я рекомендую убедиться, что для выбора ваших элементов используется атрибут class или data, а то, что когда-либо генерирует Html, гарантирует использование уникальных идентификаторов, или оставьте их все вместе, если не нужно.

Однако , если вы не сможете изменить сгенерированный HTML, я буду использовать вашу точную разметку и применять только минимальное количество изменений в скрипте, чтобы он работал.

Для события click вы можете использовать [id=identifier] вместо #identifier в своем селекторе, например, $("[id=shw_desc]").click(function() {

Это работает, так как выбор по атрибуту может вернуть несколько результатов, однако при выборе по идентификатору $(#...) jQuery вернет только первое совпадение.

В коде обработчика события click убедитесь, что вы всегда остаетесь в текущем контексте. Это применимо независимо от того, какой селектор вы используете для привязки обработчика click.

Если щелкнули shw_desc, вы не хотите обрабатывать все элементы .desc, а только тот, который находится рядом с текущим shw_desc, который был нажат.

То же самое для #shw_desc_icon img, вы хотите обрабатывать только изображение, расположенное в shw_desc, по которому щелкнули, а не все остальные на странице. Для этого вы можете использовать селектор, похожий на $("#shw_desc_icon img", this)

$(document).ready(function() {
  var collapsed = "image";

  // Select by attribute to bind to ALL shw_desc elements not just the first one
  $("[id=shw_desc]").click(function() {
    var $desc = $(this).next('.desc'); //Get the .desc element next to the current context.
    
    if ($desc.is(":visible")) {
      $desc.slideUp();
      
      // Use ',this' to ensure you only query for #shw_desc_icon within the current context.
      $("#shw_desc_icon img", this).attr("src", collapsed).css("transform", "rotate(0deg)");
    } else {
      $desc.slideDown();
      $("#shw_desc_icon img", this).attr("src", collapsed).css("transform", "rotate(180deg)");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="nt_selected">
  <span>Description</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
  <p>Some Description</p>
</div>

<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="nt_selected">
  <span>Description 2</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
  <p>Some Description 2</p>
</div>

Опять же, сказав все это, попробуйте избавиться от дубликатов идентификаторов и использовать другие общие атрибуты этих элементов для их выбора. Конечно, контекстная осведомленность все еще применяется точно так же.

0
Nope 13 Янв 2017 в 11:34