Question

我正在尝试更改与其他div共享其类的单个DIV的CSS。

我一直在寻找解决方案，但似乎没有任何效果。

我正在尝试使用下面的代码而没有结果：

$(".singleOffer").click(function(){
    $(this).parent().find(".offerSocial").css({transform: "translateY(0%)", opacity: "1" });
});

HTML

<div id="pattern" class="pattern">
  <ul class="g">

<li class="singleOffer">
      <img class="offerImg" src="<?php echo $file ?>" alt="Product Name" />
      <div class="offerSocial">
          <a class="previewLink" target="_blank" href="<?php echo $file ?>" >DOWNLOAD</a>
          <label class="shareLabel">Share on</label>
          <div class="share-buttons">
              <button class="fbShare" type="button" onclick="window.open('<?php echo $file ?>', 'newwindow', 'width=500, height=500'); return false;">Facebook</button>
              <button class="twShare" type="button" onclick="window.open('<?php echo $file ?>', 'newwindow', 'width=500, height=500'); return false;">Twitter</button>
          </div>
      <div>
</li>

<li class="singleOffer">
      <img class="offerImg" src="<?php echo $file ?>" alt="Product Name" />
      <div class="offerSocial">
          <a class="previewLink" target="_blank" href="<?php echo $file ?>" >DOWNLOAD</a>
          <label class="shareLabel">Share on</label>
          <div class="share-buttons">
              <button class="fbShare" type="button" onclick="window.open('<?php echo $file ?>', 'newwindow', 'width=500, height=500'); return false;">Facebook</button>
              <button class="twShare" type="button" onclick="window.open('<?php echo $file ?>', 'newwindow', 'width=500, height=500'); return false;">Twitter</button>
          </div>
      <div>
</li>

.....

  </ul>
</div>

Answer 1

.offerSocial已经是.singleOffer的孩子，因此您要删除.parent()选择器，这样您就不会获得所有.offerSocial个元素，并且只有与该特定.singleOffer元素相关联的元素。

$(".singleOffer").click(function(){
    $(".offerSocial").css({ opacity: "0" });
    $(this).find(".offerSocial").css({transform: "translateY(0%)", opacity: "1" });
});

Answer 2

你的HTML是这样的

 <ul class="g">

<li class="singleOffer">
      <img class="offerImg" src="<?php echo $file ?>" alt="Product Name" />
      <div class="offerSocial">
          <a class="previewLink" target="_blank" href="<?php echo $file ?>" >DOWNLOAD</a>
          <label class="shareLabel">Share on</label>
          <div class="share-buttons">
              <button class="fbShare" type="button" onclick="window.open('<?php echo $file ?>', 'newwindow', 'width=500, height=500'); return false;">Facebook</button>
              <button class="twShare" type="button" onclick="window.open('<?php echo $file ?>', 'newwindow', 'width=500, height=500'); return false;">Twitter</button>
          </div>
      <div>
</li>

...
</ul>

点击具有类singleOffer的元素时，您的js函数将触发。然后它转到它的父ul，然后尝试从其子项中查找具有类offerSocial的元素。因此，它会找到ul下的所有元素并在那里应用您的转换。

所以你应该做的就是从你的js中删除parent()函数

Answer 3

我不确定你想要什么，但我不明白你为什么使用父母。删除父函数。

$(".singleOffer").click(function(){
  $(this).find(".offerSocial").css({transform: "translateY(0%)", opacity: "1"});
});

jQuery - 更改一个与其他div共享其类的div的CSS

3 个答案: