javascript - 输出需要 3 个独特的段落。

Question

我在 jQuery 上进行多选。

我有一些问题:

我需要每个输出都是唯一的

。代码中有 3 个选择 block 。我有一个来自 font-awesome 的图标。下面我只插入了一张照片。我必须按下 1 个图标，然后 1(!!!) block 才会打开。我该怎么做？请帮忙!

$(".filterBlock .filter-ico").on('click', function() {
  $(".filterDropdown dd ul").slideToggle('fast');
});


$(".filterDropdown dd ul li a").on('click', function() {
  $(".filterDropdown dd ul").hide();
});


function getSelectedValue(id) {
  return $("#" + id).find("dt a span.value").html();
}

$(document).bind('click', function(e) {
  var $clicked = $(e.target);
  if (!$clicked.parents().hasClass("filterDropdown")) $(".filterDropdown dd ul").hide();
});

$('.multiselect input[type="checkbox"]').on('click', function() {

  var title = $(this).closest('.mutliselect').find('input[type="checkbox"]').val(),
  title = $(this).val() + ",";

  if ($(this).is(':checked')) {
    var html = '<span title="' + title + '">' + title + '</span>';
    $('.resultSelect').append(html);
    $(".resultFilter").hide();
} else {
    $('span[title="' + title + '"]').remove();
    var ret = $(".resultFilter");
    $('.filterDropdown dt a').append(ret);

}
});

.filters {
  width: 20%;
  height: 100%;
  background-color: #fff;
  border-right: 1px solid #f7f7f7;
  position: relative;
  display: inline-block;
}
.filterBlock {
  margin: 0 0 50px 0;
  position: relative;
}
.filterBlock h3 {
  margin: 30px 0 0 40px;
  color: #a6a6a6;
  font: 16px Helvetica;
}
.filterBlock .filter-ico {
  position: absolute;
  left: 100px;
  font-size: 25px;
  color: #5795f9;
  cursor: pointer;
}
.filterBlock .filter-ico.sphere {
  left: 190px;
}
.filterBlock .filter-ico.show {
  left: 200px;
}
.filterDropdown {
  position: absolute;
  top: 10px;
  left: 20px;
  z-index: 5;
  transform: translateY(-10%);
  transform: translateX(10%);
}
.filterDropdown a {
  color: #5795f9;
}
.filterDropdown dd,
.filterDropdown dt {
  margin: 0px;
  padding: 0px;
}
.filterDropdown ul {
  margin: -1px 0 0 0;
}
.filterDropdown dd {
  position: relative;
}
.filterDropdown a,
.filterDropdown a:visited {
  color: #5795f9;
  text-decoration: none;
  outline: none;
  font-size: 12px;
}
/*.filterDropdown dt a {
	background-color: #fff;
	display: block;
	padding: 8px 20px 5px 10px;
	min-height: 15px;
	line-height: 24px;
	overflow: hidden;
	border: 0;
	width: 152px;
	border:1px solid black;
}*/

.filterDropdown dt a span,
.resultSelect span {
  cursor: pointer;
  display: inline-block;
  color: #5795f9;
  margin: 0 0 0 20px;
  /*	padding: 0 6px 2px 0;*/
}
.filterDropdown dd ul {
  background-color: #fff;
  border: 0;
  color: #5795f9;
  display: none;
  left: 0px;
  padding: 2px 15px 2px 5px;
  position: absolute;
  top: 2px;
  width: 180px;
  border: 1px solid black;
  box-shadow: 0 0 10px 0 rgba(0, 0.5, 0, 0);
  border-left: none;
  border-top: none;
  list-style: none;
  height: 100px;
  overflow: auto;
}
.filterDropdown span.value {
  display: none;
}
.filterDropdown dd ul li a {
  padding: 5px;
  display: block;
}
.filterDropdown dd ul li a:hover {
  background-color: #5795f9;
}
/* */

.mainSection {
  width: 78%;
  position: absolute;
  display: inline-block;
}
.infoBlock {
  display: block;
  width: 520px;
  height: 280px;
  background: #fff;
  margin: 50px 0 0 225px;
}
.infoBlock.new {
  margin: 20px 0 0 225px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<section class = "filters">

      <div class = "filterBlock">
        <h3>Регіон</h3>
    
        <span class = "filter-ico"><img src = "menu_dropdown_9971.ico"></span>
        <dl class = "filterDropdown first">
          <dt>
            <a href=""> <span class = "resultFilter"></span></a>

            <p class = "resultSelect"></p>

          </dt>
          <dd>
            <div class = "multiselect">
              <ul>

                <li><input type="checkbox" value="Київ">Київ</li>
                <li><input type="checkbox" value="Київ">Київ</li>
                <li><input type="checkbox" value="Київ">Київ</li>
              </ul>
            </div>
          </dd>

        </dl>

      </div>

      <div class = "filterBlock sphere">
        <h3>Сфера діяльності</h3>
    
       <span class = "filter-ico"><img src = "menu_dropdown_9971.ico"></span>
        <dl class = "filterDropdown first">
          <dt>
            <a href=""> <span class = "resultFilter"></span></a>

            <p class = "resultSelect"></p>

          </dt>
          <dd>
            <div class = "multiselect">
              <ul>

                <li><input type="checkbox" value="Судова система">Судова система</li>
                <li><input type="checkbox" value="Прокуратура">Прокуратура</li>
              </ul>
            </div>
          </dd>

        </dl>

      </div>

      <div class = "filterBlock show">
        <h3>Показувати спочатку</h3>
    
        <span class = "filter-ico"><img src = "menu_dropdown_9971.ico"></span>
        <dl class = "filterDropdown first">
          <dt>
            <a href=""> <span class = "resultFilter"></span></a>

            <p class = "resultSelect"></p>

          </dt>
          <dd>
            <div class = "multiselect">
              <ul>

                <li><input type="checkbox" value="Осіб з більшим показником ризику">Осіб з більшим показником ризику</li>
                <li><input type="checkbox" value="Осіб з меньшим показником ризику">Осіб з меньшим показником ризику</li>

              </ul>
            </div>
          </dd>

        </dl>

      </div>
    </section>

Answer 1

这是打破单击的代码

$(document).bind('click', function(e) {
  var $clicked = $(e.target);
  if (!$clicked.parents().hasClass("filterDropdown")) $(".filterDropdown dd ul").hide();
});

您需要重构它并弄清楚目标的父级应该是什么，以便在您单击外部时允许它关闭