javascript - jQuery - 想要将函数限制为仅使用一个 div 中的元素

Question

基本上，我有这个:

<div class="articlecontainer">
 <div class="image"><img src="some_image.jpg"></div> <!----image is floated left--->
  <div class="content">
   <p>
      Some text about the image. 
      Some text about the image.
      Some text about the image.
   </p>
    <span class="morelink">Link to Read More</span>
     <div class="more">
        <p>
          More text about the image. 
          More text about the image.
          More text about the image.
       </p>
     </div> <!--- close more --->
   </div> <!--- close content --->
 </div> <!--- close articlecontainer --->

我希望我的函数仅在 <div class="image"> 上运行在同一<div class="articlecontainer"> div 作为 <span class="morelink"> 中的链接.

这可能吗？我该怎么做？

我知道我可以通过为所有内容提供一个 ID 并使用不同的 ID 为每篇文章重复该功能来实现这一点，但这对我来说似乎效率不高。

这是我目前正在做的事情:

宽度已定义。我唯一要改变的是高度。

我在一段文字旁边有一张图片。此文本 block 位于带有 .content 的 div 中类(class)。这些 div 从一个高度开始(取决于其中的文本量)，但如果单击“阅读更多”链接，高度会增加。

图像具有 .image类，该类的初始高度由内容 div 的高度决定。单击“阅读更多”链接时，将显示“更多”div，并以 100% 的高度显示图像。

我想使用类，因为我有多篇文章遵循同样的模式，我不想有几个重复的 ID 做同样的事情。

问题:

由于使用类，所有 图像的高度都带有 .image类最初由带有 .content 的第一个 div 设置类，当点击任何“阅读更多”链接时，所有图像都会展开。

我想做什么:

我想将图像高度、内容高度和“阅读更多”链接联系在一起。即在第1条中点击“更多”链接时，只影响第1条，在第2条中点击“更多”链接时，只影响第2条，依此类推。

这可能吗？

我目前正在做的笔:

http://codepen.io/adamcycle/pen/qRRzja

Answer 1

在您的 javascript 中做了一些代码更改。是你想要的吗？

var more1height = $("#more1").height();
var more2height = $("#more2").height()
$("#more1, #more2").hide();
var imgHeight = $(".pic").height();
var contHeight = $(".content").height();
$(".image").height(contHeight);
$("#more1link").click(function() {
  var image = $('#more1').parent('.content').siblings('.image');
  if  ($('#more1').is(":visible")) {
    $("#more1").hide(200);
    image.height(contHeight);
  } else {
    $("#more1").slideDown(200);
    image.height(contHeight+more1height);
  }
});

$("#more2link").click(function() {
  var image = $('#more2').parent('.content').siblings('.image');
  if  ($('#more2').is(":visible")) {
    $("#more2").hide(200);
    image.height(contHeight);
  } else {
    $("#more2").slideDown(200);
    image.height(contHeight+more2height);
  }
});

.articlecontainer {
    margin-bottom: 15px;
    overflow: auto;
}
.content {
    width: auto;
    padding: 0 15px;
    overflow: hidden;
    line-height: 1.6;
    margin-top: -20px;
  }
.content h3 {
    margin-top: -6px;
    font-weight: 400;
}
.image {
    float: left;
    width: 450px;
    overflow: hidden;
    display: block;
    border: 2px solid #f5f5f5;


}
.pic {
  width: 100%;
  }
.morelink {
    color: gray;
    cursor: pointer;

}
.more {
display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="articlecontainer">
                      <h2>Cat 1</h2>

<div class="image"><img src="http://i.imgur.com/znXfFyn.jpg" class="pic" alt="cat" /> </div>
<div class="content">
  <p>Cat not kitten around flop over drink water out of the faucet and chase ball of string. Sleep on dog bed, force dog to sleep on floor. Cats secretly make all the worlds muffins meowing non stop for food. Shove bum in owner's face like camera lens fall over dead (not really but gets sypathy) for instantly break out into full speed gallop across the house for no reason russian blue wake up human for food at 4am wake up human for food at 4am but jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed.</p>
                            <p><span class="morelink" id="more1link"><em>Read More</em></span>

<div class="more" id="more1">
  <p>Have my breakfast spaghetti yarn unwrap toilet paper yet bleghbleghvomit my furball really tie the room together but cough furball or lick yarn hanging out of own butt, love to play with owner's hair tie lick butt and make a weird face. Have secret plans mrow and lay on arms while you're using the keyboard or stare at the wall, play with food and get confused by dust has closed eyes but still sees you run in circles, yet knock dish off table head butt cant eat out of my own dish. </p>
                          </div><!--- end more --->
</div><!--- end content --->
</div><!--- end articlecontainer --->

<div class="articlecontainer">
                      <h2>Cat 2</h2>

<div class="image"><img src="http://i.imgur.com/ocquBvl.jpg" class="pic" alt="cat" /> </div>
<div class="content">
  <p>Cat not kitten around flop over drink water out of the faucet and chase ball of string. Sleep on dog bed, force dog to sleep on floor. Cats secretly make all the worlds muffins meowing non stop for food.</p>
                            <p><span class="morelink" id="more2link"><em>Read More</em></span>

<div class="more" id="more2">
  <p>Have my breakfast spaghetti yarn unwrap toilet paper yet bleghbleghvomit my furball really tie the room together but cough furball or lick yarn hanging out of own butt, love to play with owner's hair tie lick butt and make a weird face. Have secret plans mrow and lay on arms while you're using the keyboard or stare at the wall, play with food and get confused by dust has closed eyes but still sees you run in circles, yet knock dish off table head butt cant eat out of my own dish. </p>
                          </div><!--- end more --->
</div><!--- end content --->
</div><!--- end articlecontainer --->