究竟是什么标识了网站访问者？

Question

Randall

Asked:2020-12-23 15:18:14 +0000 UTC2020-12-23 15:18:14 +0000 UTC 2020-12-23 15:18:14 +0000 UTC

如何在不重复的情况下为不同元素正确编写点击函数

772

$(".summary_1").click(function(){
	if ($("#hotel-facilities").is(":hidden")) {
			$("#hotel-facilities").slideDown("slow");
			$(".summary_1").addClass("open");
	}	else {
		$("#hotel-facilities").hide("slow");
			$(".summary_1").removeClass("open");
	}
});
$(".summary_2").click(function(){
	if ($("#lodging_type").is(":hidden")) {
			$("#lodging_type").slideDown("slow");
			$(".summary_2").addClass("open");
	}	else {
		$("#lodging_type").hide("slow");
			$(".summary_2").removeClass("open");
	}
});

.details {
	border-top: 1px solid #cdd0d2;
	border-bottom: 0;
	cursor: pointer;
}
.tab_content {
	display: none;
	position: relative;
	border-bottom: 1px solid #cdd0d2;
	width: 250px;
	user-select: none;
	outline: 0;
}
.is-hidden {
	display: none;
}
.summary_1, .summary_2 {
	font-size: 14px;
	padding: 14px 40px;
	position: relative;
	list-style-type: none;
	margin: 0;
	font-weight: 400;
}

.summary_1:before {
	/*-webkit-transform: translate(-50%,-50%) rotate(0);*/
	transform: translate(-50%,-50%) rotate(-90deg);
    will-change: translate,rotate;
}
.summary_2:before {
	/*-webkit-transform: translate(-50%,-50%) rotate(0);*/
	transform: translate(-50%,-50%) rotate(-90deg);
    will-change: translate,rotate;
}

.summary_1:after {
	transform: translate(-50%,-50%);
    will-change: translate,opacity;
}
.summary_2:after {
	transform: translate(-50%,-50%);
    will-change: translate,opacity;
}
.summary_1.open:before{ /* добавочный класс */
    transform:translate(-50%,-50%) rotate(-0deg);
    width:0;
}
.summary_2.open:before{ /* добавочный класс */
    transform:translate(-50%,-50%) rotate(-0deg);
    width:0;
}
.summary_1:after,
.summary_1:before {
	content: "";
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background-color: #37454d;
	display: block;
	position: absolute;
	top: 50%;
	transition: all .2s ease-in-out;
	opacity: 1;
	left: 21px;
	contain: strict;
}
.summary_2:after,
.summary_2:before {
	content: "";
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background-color: #37454d;
	display: block;
	position: absolute;
	top: 50%;
	transition: all .2s ease-in-out;
	opacity: 1;
	left: 21px;
	contain: strict;
}
.summary_1, .summary_2:hover {
	background: #ebeced;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="details">
  <h4 class="summary_1" role="tab" aria-expanded="false" aria-owns="hotel-facilities" aria-controls="hotel-facilities" tabindex="0">Hotel facilities</h4>
  <div id="hotel-facilities" class="is-hidden">
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">24-hour reception (4923)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">24-hour room service (286)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">Airport shuttle (602)</span>
      </label>
    </div>
      <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">Beach umbrellas (2094)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">Bungalows (152)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">Business center (3052)</span>
      </label>
    </div>
        <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">Casino (113)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">Concierge (2187)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">Conference rooms (2659)</span>
      </label>
    </div>
      <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">Convenience store (1219)</span>
      </label>
    </div>
  </div>
</section>
<section class="details">
  <h4 class="summary_2" role="tab" aria-expanded="false" aria-owns="hotel-facilities" aria-controls="hotel-facilities" tabindex="0">Type of lodging</h4>
  <div id="lodging_type" class="is-hidden">
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Bed & Breakfast (427)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Camping Site (27)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Hostel (121)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Hotel (8967)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Motel (816)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Pension (243)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Serviced Apartment (493)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Vacation Home (3417)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Vacation Rental (11847)</span>
      </label>
    </div>
  </div>
</section>

大家好，有 2 个块，单击它们会打开。我为每个块编写了自己的类和自己的标识符。我需要以某种方式组合这些块。这样就没有重复的代码。为什么？因为该站点将有 9这样的块并为每个等编写summary_1, summary_2, summary_3, summary_4 ,summary_5并错误地给出你的风格，你需要有一个单一的类，如果不可能的话，你需要一个单一的标识符，这样代码就不会以这种方式重复。一切都写得优雅而正确。

1 个回答

Voted

teran · Answer 1 · 2020-12-23T15:29:05Z

如果你自己看到类是一样的，工作的逻辑是一样的，那就留下一个类就行了。

$(".summary").click(function(){
    var acSel = '#' + $(this).attr('aria-controls');
    
    // можно так, если исходная анимация не нужна в точности
    // $(acSel).slideToggle('slow');
    // или как в вопросе
    if ($(acSel).is(":hidden")) {
        $(acSel).slideDown("slow");
    }
    else {
	    $(acSel).hide("slow");			
    }
    $(this).toggleClass("open");
});

.details {
	border-top: 1px solid #cdd0d2;
	border-bottom: 0;
	cursor: pointer;
}
.tab_content {
	display: none;
	position: relative;
	border-bottom: 1px solid #cdd0d2;
	width: 250px;
	user-select: none;
	outline: 0;
}
.is-hidden {
	display: none;
}
.summary {
	font-size: 14px;
	padding: 14px 40px;
	position: relative;
	list-style-type: none;
	margin: 0;
	font-weight: 400;
}

.summary:before {
	/*-webkit-transform: translate(-50%,-50%) rotate(0);*/
	transform: translate(-50%,-50%) rotate(-90deg);
    will-change: translate,rotate;
}
.summary:after {
	transform: translate(-50%,-50%);
    will-change: translate,opacity;
}

.summary.open:before{ /* добавочный класс */
    transform:translate(-50%,-50%) rotate(-0deg);
    width:0;
}

.summary:after,
.summary:before {
	content: "";
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background-color: #37454d;
	display: block;
	position: absolute;
	top: 50%;
	transition: all .2s ease-in-out;
	opacity: 1;
	left: 21px;
	contain: strict;
}

.summary:hover {
	background: #ebeced;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="details">
  <h4 class="summary" role="tab" aria-expanded="false" aria-owns="hotel-facilities" aria-controls="hotel-facilities" tabindex="0">Hotel facilities</h4>
  <div id="hotel-facilities" class="is-hidden">
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">24-hour reception (4923)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">24-hour room service (286)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">Airport shuttle (602)</span>
      </label>
    </div>
      <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">Beach umbrellas (2094)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">Bungalows (152)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">Business center (3052)</span>
      </label>
    </div>
        <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">Casino (113)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">Concierge (2187)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">Conference rooms (2659)</span>
      </label>
    </div>
      <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="hotel-facilities-200" name="hotel-facilities-200" class="checkbox">
        <span class="label">Convenience store (1219)</span>
      </label>
    </div>
  </div>
</section>
<section class="details">
  <h4 class="summary" role="tab" aria-expanded="false" aria-owns="lodging-type" aria-controls="lodging_type" tabindex="0">Type of lodging</h4>
  <div id="lodging_type" class="is-hidden">
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Bed & Breakfast (427)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Camping Site (27)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Hostel (121)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Hotel (8967)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Motel (816)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Pension (243)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Serviced Apartment (493)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Vacation Home (3417)</span>
      </label>
    </div>
    <div role="treeitem" aria-selected="false">
      <label class="checkbox-container grouped">
        <input type="checkbox" id="lodging_type-200" name="lodging_type-200" class="checkbox">
        <span class="label">Vacation Rental (11847)</span>
      </label>
    </div>
  </div>
</section>

如何在不重复的情况下为不同元素正确编写点击函数

Python 3.6 - 安装 MySQL (Windows)

C++ 编写程序“计算单个岛屿”。填充一个二维数组 12x12 0 和 1

返回指针的函数

我使用 django 管理面板添加图像，但它没有显示

这些条目是什么意思，它们的完整等效项是什么样的

浏览器仍然缓存文件数据

在 Excel VBA 中激活工作表的问题

为什么内置类型中包含复数而小数不包含？

获得唯一途径

告诉我一个像幻灯片一样创建滚动的库

如何在不重复的情况下为不同元素正确编写点击函数

1 个回答

相关问题