我试图将选择器限制为最上层的div，以便可以在页面上放置同一代码的多个实例。我希望避免在所有内容上都使用ID，但是我不是100％地确定如何为每个实例分配唯一的选择器，然后使用动态选择器代码将函数限制为各自的实例。
我想我可以用[i]分配一个数字，但是我不知道如何查找和选择它。抱歉，我没学过如何正确地做这些事情-_-
我尝试使用.find方法在顶级div上获取具有唯一ID的父选择器，但是我发现我必须为每个函数创建var并将它们组合在一起以创建选择器-我希望有一种更有效的方法。 / p>
jQuery(document).ready(function() {
jQuery(".embedCode").hide();
jQuery(".copySuccess").hide();
function copyToClipboard(element) {
var jQuerytemp = jQuery("<input>");
jQuery("body").append(jQuerytemp);
jQuerytemp.val(jQuery(element).text()).select();
document.execCommand("copy");
jQuerytemp.remove();
}
jQuery("button.cpy").click(function() {
copyToClipboard("#p1");
jQuery(".copySuccess").show().fadeOut(3500);
});
jQuery(".embedWin a").click(function() {
jQuery(".embedCode").fadeIn();
});
jQuery("a.embedClose").click(function() {
jQuery(".embedCode").fadeOut();
});
var width1 = jQuery("img.img1").width();
if (width1 <= 400) {
jQuery(".embedTXT").hide();
jQuery("a.embedClose").css("position", "relative");
jQuery("a.embedClose").css("left", "0");
};
});.shareBox {
margin: 0px auto;
max-width: 500px;
position: relative;
}
img.mainImg {
width: 100%;
position: relative;
}
.embedWin {
width: 100%;
padding-top: 20px;
text-align: center;
font-family: Arial, sans-serif;
font-size: 10px;
}
.embedCode {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: rgba(255, 255, 255, .95);
border-radius: 2px;
}
.embed-snippet {
width: 100%;
height: auto;
max-width: 400px;
margin: 10px auto;
padding: 10px;
border: 1px #ccc solid;
border-radius: 4px;
box-shadow: 1px 1px 1px inset #ccc;
word-wrap: break-word !important;
color: #000;
background: rgba(255, 255, 255, .9);
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;
}
#p1 {
font-size: 9px;
}
.embedCode h6 {
font-size: 16px;
line-height: 16px;
margin: 10px 0px;
text-shadow: 1px 1px 2px #ddd;
}
a.embedCodeBtn {
text-decoration: none;
color: #000;
font-weight: bold;
cursor: pointer;
}
a.embedCodeBtn:hover {
color: gray;
text-decoration: none;
}
.embedButWrap {
display: block;
text-align: center;
line-height: 20px;
height: 20px;
padding: 0px;
}
a.embedCodeBtn {
display: inline-block;
}
a.embedClose {
text-decoration: none;
box-shadow: none !important;
font-size: 10px;
cursor: pointer;
font-weight: bold;
position: absolute;
bottom: 5%;
left: calc(50% - 50px);
width: 100px;
color: #000;
border: 0px;
}
a.embedClose:hover {
color: gray;
}
button.cpy {
outline: none;
-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
box-shadow: inset 0px 1px 0px 0px #ffffff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
background: -moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background: -webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background: -o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background: -ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0);
background-color: #ffffff;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #dcdcdc;
display: inline-block;
cursor: pointer;
color: #666666;
font-family: Arial;
font-size: 12px;
font-weight: bold;
padding: 6px 20px;
text-decoration: none;
text-shadow: 0px 1px 0px #ffffff;
letter-spacing: 0px;
text-transform: none;
}
button.cpy:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
background: -moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background: -webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background: -o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background: -ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
background: linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff', GradientType=0);
background-color: #f6f6f6;
}
button.cpy:active {
position: relative;
top: 1px;
}
.embedTXT p {
padding: 0px 10px;
}
.copySuccess {
padding: 10px 0px 0px 0px;
color: green;
cursor: default;
position: absolute;
width: 200px;
top: 0px;
left: calc(50% - 100px);
font-weight: bold;
background: #fff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shareBox">
<a href="https://i.imgur.com/3cfwuGn.png" target="_blank"><img src="https://i.imgur.com/3cfwuGn.png" class="mainImg img1" /></a>
<div class="embedWin">
<div class="embedButWrap"><a href="javascript:void(0)" class="embedCodeBtn">Embed →</a></div>
<!---embedButWrap--->
<div class="embedCode">
<div class="vertWrap">
<h6>Embed HTML</h6>
<div class="embed-snippet"><code class="language-html" id="p1"><div style="max-width:500px;"><img src="https://i.imgur.com/3cfwuGn.png" style="max-width:500px;"/><div style="width:100%;text-align:right;font-family:Arial,sans-serif;font-size:10px;"><a href="https://www.tokeet.com/" style="text-decoration:none;color:gray;">Tokeet</a></div></div> </code></div>
<button class="selB cpy">Copy</button>
<div class="copySuccess">Copied to Clipboard!</div>
<div class="embedTXT">
<p>Copy and paste the above code into your CMS's HTML editor to embed this content.</p>
</div>
<a href="javascript:void(0)" class="embedClose">[Close]</a>
</div>
<!---vertWrap--->
</div>
<!---embedCode--->
</div>
</div>
</div>
我在这里有一个功能代码：https://codepen.io/JTBennett/pen/ebXEKE
答案 0 :(得分：0)
您可以使用许多jQuery遍历方法和css选择器-与$(this)选择器一起使用-分别标识具有相同类的元素（从不使用ID-不屈服）如果有多个具有相同ID的元素，则倾向于使用ID。只需使用类。）
例如，您可以获得点击的元素$(this)并使用parent()向上移动到下一个级别，甚至更高-通过closest()可以达到最高然后使用find()返回到某个特定元素。参见代码段演示。
$('.aBob').click(function(){
$(this).closest('.myDiv').find('.nxtDiv').show();
});.nxtDiv{display:none;color:red;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="myDiv">
<div class="nxtDiv">Found the first</div>
<aside class="aBob">First</aside>
</div>
<div class="myDiv">
<div class="nxtDiv">Found the second</div>
<aside class="aBob">Second</aside>
</div>
您还可以使用css选择器（请注意，所有jQuery选择器都只是css3选择器！）查找一定数量的内容-例如，单击第四个<li>，检测到，然后显示第四个隐藏的sub-div：
/* Here are a couple different ways to do this, uncomment one or the other*/
$('li').click(function(){
var num = $(this).data('fred');
//$('.outer div:nth-child(' + num + ')').show();
// -OR-
$('.outer').find('div:nth-child(' + num + ')').show();
});.outer div{display:none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<ul>
<li data-fred="1">LI One</li>
<li data-fred="2">LI Two</li>
<li data-fred="3">LI Three</li>
<li data-fred="4">LI Four</li>
</ul>
<div class="outer">
<div>First inner div</div>
<div>Second inner div</div>
<div>Third inner div</div>
<div>Fourth inner div</div>
</div>