显示/隐藏（独立复制）1000 个句子（并保持良好的浏览器/主机性能）

Question

我已经进行了 JQuery 脚本测试以显示/隐藏（复制）我页面的未来句子（1000 个独立复制）所以我正在寻找最简单的方式（用于浏览器/主机）。

这是我已经写过的 2 个经典/实用的解决方案。

• 您认为最佳解决方案是什么？
• 您是否看到其他/更好的解决方案来满足我的需求？也许使用变量和增量，但还不确定如何使用。

感谢您的建议！

• 1（addClass/removeClass + 将要写 1000 x 2 个句子） =

https://jsfiddle.net/mb6g0u3d/

$(function(){
// script for sentence1
$("#button1show").click(function(){
$("#sentence1").removeClass("hide");
$("#button1show").addClass("hide")});
$("#button1hide").click(function(){
$("#sentence1").addClass("hide");
$("#button1show").removeClass("hide")});

// script for sentence2
$("#button2show").click(function(){
$("#sentence2").removeClass("hide");
$("#button2show").addClass("hide")});
$("#button2hide").click(function(){
$("#sentence2").addClass("hide");
$("#button2show").removeClass("hide")})
})

.hide {
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- sentences to show somewhere else -->
sentence1<br />
<button id="button1show">show there</button>
<br /><br />
sentence2<br />
<button id="button2show">show there</button>

<hr />

<!-- somewhere else -->
<div id="sentence1" class="hide">
sentence1<br />
<button id="button1hide">hide here</button>
</div>
<br />
<div id="sentence2" class="hide">
sentence2<br />
<button id="button2hide">hide here</button>
</div>

• 2 (addClass/removeClass/clone + 只需要写 1000 句) =

https://jsfiddle.net/L7q2juce/

// script for sentence1
$("#button1show").on("click", function() {
$("#button1hide").removeClass("hide");
$("#button1show").addClass("hide");
$('#sentence1tocopy').clone().addClass('cloned1').attr('id',null).appendTo('#clonehere1')});
$("#button1hide").on("click", function() {
$("#button1show").removeClass("hide");
$("#button1hide").addClass("hide");
$('.cloned1').remove()});

// script for sentence2
$("#button2show").on("click", function() {
$("#button2hide").removeClass("hide");
$("#button2show").addClass("hide");
$('#sentence2tocopy').clone().addClass('cloned2').attr('id',null).appendTo('#clonehere2')});
$("#button2hide").on("click", function() {
$("#button2show").removeClass("hide");
$("#button2hide").addClass("hide");
$('.cloned2').remove()})

.hide {
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- sentences to show somewhere else -->
<div id="sentence1tocopy">sentence1</div><button id="button1show">show there</button>
<br /><br />
<div id="sentence2tocopy">sentence2</div><button id="button2show">show there</button>

<hr />

<!-- somewhere else -->
<div id="clonehere1"></div><button class="hide" id="button1hide">hide here</button>
<br /><br />
<div id="clonehere2"></div><button class="hide" id="button2hide">hide here</button>

Answer 1

数据属性可以让你在不重复代码的情况下做到这一点。

$("[data-toggles]").on("click", function (){
  var btn = $(this);
  var selector = btn.data('toggles');
  $(selector).toggleClass("hide");
});

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- sentences to show somewhere else -->
sentence1 <button data-toggles="#sentence1">show there</button>
<br /> sentence2 <button data-toggles="#sentence2">show there</button>

<hr />

<!-- somewhere else -->
<div id="sentence1" class="hide">
  sentence1 <button data-toggles="#sentence1">hide here</button>
</div>
<div id="sentence2" class="hide">
  sentence2 <button data-toggles="#sentence2">hide here</button>
</div>

如果你想让它确保它显示/隐藏，添加另一个属性

$("[data-shows]").on("click", function (){
  var btn = $(this);
  var selector = btn.data('shows');
  $(selector).removeClass("hide");
});

$("[data-hides]").on("click", function (){
  var btn = $(this);
  var selector = btn.data('hides');
  $(selector).addClass("hide");
});

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- sentences to show somewhere else -->
sentence1 <button data-shows="#sentence1">show there</button>
<br /> sentence2 <button data-shows="#sentence2">show there</button>

<hr />

<!-- somewhere else -->
<div id="sentence1" class="hide">
  sentence1 <button data-hides="#sentence1">hide here</button>
</div>
<div id="sentence2" class="hide">
  sentence2 <button data-hides="#sentence2">hide here</button>
</div>

Answer 2

感谢您提供的 HTML5 提示 @epascarello ！我不知道那些 data-* 东西，它非常好。我为所选句子添加了突出显示。

// add phrase (dans zone phrase collée) (quand clic bouton add)
$("[data-shows]").on("click", function (){
var btn = $(this);
var selector = btn.data('shows');
$(selector).removeClass("hide");
});
// remove phrase (de zone phrase collée) (quand clic bouton remove)
$("[data-hides]").on("click", function (){
var btn = $(this);
var selector = btn.data('hides');
$(selector).addClass("hide");
});

// add fond jaune (zone) + remove pink (zone) (quand clic bouton add)
$("[data-addcouleurjaune]").on("click", function (){
var btn = $(this);
var selector = btn.data('addcouleurjaune');
$(selector).removeClass("pink");
$(selector).addClass("yellow");
});
// remove fond jaune (zone) + remove pink (zone) (quand clic bouton remove)
$("[data-removecouleurjaune]").on("click", function (){
var btn = $(this);
var selector = btn.data('removecouleurjaune');
$(selector).removeClass("yellow");
$(selector).removeClass("pink");
});

// add fond rose (zone) + remove fond jaune (zone) (quand clic fond rose (zone))
$("[data-dzonephrase1archive]").on("click", function (){
var btn = $(this);
var selector = btn.data('dzonephrase1archive');
$(selector).removeClass("yellow");
$(selector).addClass("pink");
});

// remove phrase (de zone phrase collée) (quand clic fond rose (zone))
$("[data-dphrasedupliquee]").on("click", function (){
var btn = $(this);
var selector = btn.data('dphrasedupliquee');
$(selector).addClass("hide");
});

.hide {
display:none;
}

.yellow {
background-color:yellow;
}

.pink {
background-color:pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- ADD -->
PHRASE1<br />
montrer : <button
data-shows="#sentence1"
data-addcouleurjaune="#zonephrase1archive">clic</button>
<br />
cacher : <button
data-hides="#sentence1"
data-removecouleurjaune="#zonephrase1archive"
>clic</button>

<div id="zonephrase1archive" data-dzonephrase1archive="#zonephrase1archive" data-dphrasedupliquee="#sentence1">phrase1 à duppliquer</div>

<br /><hr />

PHRASE2<br />
montrer : <button
data-shows="#sentence2"
data-addcouleurjaune="#zonephrase2archive">clic</button>
<br />
cacher : <button
data-hides="#sentence2"
data-removecouleurjaune="#zonephrase2archive"
>clic</button>

<div id="zonephrase2archive" data-dzonephrase1archive="#zonephrase2archive" data-dphrasedupliquee="#sentence2">phrase2 à duppliquer</div>

<br /><hr /><hr /><hr />

<!-- REMOVE -->
<div id="sentence1" class="hide">
phrase1 à duppliquer
</div>

<br /><hr />

<div id="sentence2" class="hide">
phrase2 à duppliquer
</div>

我仍在寻找添加 clone() JQuery 方法以仅包含 1000 个句子（不必写 2 次）。问题：点击按钮只显示1个句子类型，我不知道如何只显示好的。

// add phrase (dans zone phrase collée) (quand clic bouton add)
$("[data-shows]").on("click", function (){
var btn = $(this);
var selector = btn.data('shows');
$(selector).removeClass("hide");
$('.cloned1').remove();
});
// remove phrase (de zone phrase collée) (quand clic bouton remove)
$("[data-hides]").on("click", function (){
var btn = $(this);
var selector = btn.data('hides');
$(selector).addClass("hide");
});

// add fond jaune (zone) + remove pink (zone) (quand clic bouton add)
$("[data-addcouleurjaune]").on("click", function (){
var btn = $(this);
var selector = btn.data('addcouleurjaune');
$(selector).clone().addClass('cloned1').attr('id',null).appendTo($('[data-ici]'));
$(selector).removeClass("pink");
$(selector).addClass("yellow");
});
// remove fond jaune (zone) + remove pink (zone) (quand clic bouton remove)
$("[data-removecouleurjaune]").on("click", function (){
var btn = $(this);
var selector = btn.data('removecouleurjaune');
$(selector).removeClass("yellow");
$(selector).removeClass("pink");
});

// add fond rose (zone) + remove fond jaune (zone) (quand clic fond rose (zone))
$("[data-dzonephrase1archive]").on("click", function (){
var btn = $(this);
var selector = btn.data('dzonephrase1archive');
$(selector).removeClass("yellow");
$(selector).addClass("pink");
});

// remove phrase (de zone phrase collée) (quand clic fond rose (zone))
$("[data-dphrasedupliquee]").on("click", function (){
var btn = $(this);
var selector = btn.data('dphrasedupliquee');
$(selector).addClass("hide");
});

.hide {
display: none;
content-visibility:hidden;
}

.yellow {
background-color:yellow;
}

.pink {
background-color:pink;
}

.cloned1 {
background-color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- ADD -->
PHRASE1<br />
montrer : <button
data-shows="#sentence1"
data-addcouleurjaune="#zonephrase1archive">clic</button>
<br />
cacher : <button
data-hides="#sentence1"
data-removecouleurjaune="#zonephrase1archive"
>clic</button>

<div id="zonephrase1archive" data-dzonephrase1archive="#zonephrase1archive" data-dphrasedupliquee="#sentence1">phrase1 à duppliquer</div>

<br /><hr />

PHRASE2<br />
montrer : <button
data-shows="#sentence2"
data-addcouleurjaune="#zonephrase2archive">clic</button>
<br />
cacher : <button
data-hides="#sentence2"
data-removecouleurjaune="#zonephrase2archive"
>clic</button>

<div id="zonephrase2archive" data-dzonephrase1archive="#zonephrase2archive" data-dphrasedupliquee="#sentence2">phrase2 à duppliquer</div>

<br /><hr /><hr /><hr />

<!-- REMOVE -->
<div id="sentence1" class="hide">
<div id="ici1" data-ici="#ici1"></div>
</div>

<br /><hr />

<div id="sentence2" class="hide">
<div id="ici2" data-ici="#ici2"></div>
</div>