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

分类：编程问答

如何解决显示/隐藏独立复制1000 句并保持良好的浏览器/主机性能

我已经进行了 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>

解决方法

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

$("[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>

,

感谢您的 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('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('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>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其他元素将获得点击?
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。）
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么？
这是用Java进行XML解析的最佳库
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构为什么？
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么？
如何在Java中聆听按键时移动图像
如何在Java中聆听按键时移动图像。
Java“Program to an interface”这是什么意思？
Java“Program to an interface”。这是什么意思？
Java在半透明框架/面板/组件上重新绘画
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName”和“ Class.forNamenewInstance”之间有什么区别？
Java“ Class.forName（）”和“ Class.forName（）。newInstance（）”之间有什么区别？
在此环境中不提供编译器也许是在JRE而不是JDK上运行？
在此环境中不提供编译器。也许是在JRE而不是JDK上运行？
Java用相同的方法在一个类中实现两个接口哪种接口方法被覆盖？
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖？
Java 什么是Runtime.getRuntimetotalMemory和freeMemory？
Java 什么是Runtime.getRuntime（）。totalMemory（）和freeMemory（）？
java.library.path中的java.lang.UnsatisfiedLinkError否*****dll
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的” 即使在同一包装中
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类怎么处理？
Java 导入两个具有相同名称的类。怎么处理？
Java 是否应该在HttpServletResponse.getOutputStream/getWriter上调用.close？
Java 是否应该在HttpServletResponse.getOutputStream（）/。getWriter（）上调用.close（）？
Java RegEx元字符和普通点？
Java RegEx元字符（。）和普通点？
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot