0

我正在尝试将选择器限制在最顶部的 div 中，这样我就可以将同一代码的多个实例放在一个页面上。我希望避免将 ID 放在所有内容上，但我不是 100% 确定如何为每个实例分配唯一的选择器，然后使用动态选择器代码将功能限制到各自的实例。

我想我可以用 [i] 分配一个数字，但我不知道如何找到和选择它。对不起，我从来没有学会如何正确地做这些事情-_-

我尝试使用 .find 方法在顶部 div 上获取具有唯一 ID 的父选择器，但我发现我必须为每个函数创建 var 并将它们组合起来以创建选择器 - 我希望有一种更有效的方法。

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 &#8594;</a></div>
    <!---embedButWrap--->
    <div class="embedCode">
      <div class="vertWrap">
        <h6>Embed HTML</h6>
        <div class="embed-snippet"><code class="language-html" id="p1">&lt;div style=&quot;max-width:500px;&quot;&gt;&lt;img src=&quot;https://i.imgur.com/3cfwuGn.png&quot; style=&quot;max-width:500px;&quot;/&gt;&lt;div style=&quot;width:100%;text-align:right;font-family:Arial,sans-serif;font-size:10px;&quot;&gt;&lt;a href=&quot;https://www.tokeet.com/&quot; style=&quot;text-decoration:none;color:gray;&quot;&gt;Tokeet&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;    </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

4

1 回答 1

0

您可以使用许多 jQuery 遍历方法和 css 选择器——连同$(this)选择器——单独识别具有相同类的元素（从不使用 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>，检测到，然后显示第四个隐藏的子 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>

于 2019-01-19T16:44:45.150 回答