Jquery console.log 给出了两个不同的对象

Question

我是 Jquery 的新手，所以我会给自己一些小事来做。现在，我正在尝试制作一个基本的“少读”和“多读”按钮。我做了很多工作，但有一件事一直困扰着我。这是我的一些代码：

$(".ReadMore").click(function() {
    var numbers = ($(this).attr('id'));
    $(".cat." + numbers).css("max-height", "9000px");
    $(this).css("opacity", "0");

    console.log($(".ReadLess#" + numbers).css("opacity", "1"));
});

还有少读：

$(".ReadLess").click(function() {
    var numbers = ($(this).attr('id'));

    $(".cat." + numbers).css("max-height", "230px");
    console.log($(".ReadMore#" + numbers).css("opacity", "1"));
});

如您所见，它们几乎相同。 readmore 功能非常适合我。然而，少读不会。它使 .cat 具有良好的高度，但 Readmore 看起来并不像它应该的那样。我尝试通过控制台记录它，但我看到了一些差异，这是什么意思，以及如何让它工作。

编辑：

这里是两个按钮的html：

"<div class='ReadMore' id='$column_count' style='display: block; ' > ";
                echo "Read more ...";
                echo "</div>";    


"<div class='ReadLess' id='$column_count'  style='display: block '>";

                                echo "Read less...";

                                echo "</div>";

Answer 1

这告诉您没有找到匹配选择器.ReadMore#6 的元素。这就是为什么 jQuery 对象的 length 是 0 以及为什么没有 0 属性（jQuery 对象有点像数组），而在第一个带有 .ReadLess#6 选择器的示例中，length 是 @987654327 @ 并且有一个 0 属性，它指的是匹配的一个元素。

查看您发布的 HTML（好吧，足够接近，生成它的服务器端代码），您有多个带有 id="6" 的元素（等等）。这是无效的，文档中只能有一个单个元素带有id="6"。

因此，修复方法不是在多个元素上使用相同的 id。

您可能根本不需要id 值，具体取决于文档的结构。在您的事件处理程序中，this 指的是被单击的特定元素，因此您可以使用它来导航到要更改其大小的事物。

所以我怀疑你可以这样做：

$(".ReadMore").click(function() {
    var $this = $(this);
    var cat = $this.closest(".cat");
    cat.css("max-height", "9000px");
    $this.css("opacity", 0);                  // Side note: Don't use strings
    cat.find(".ReadLess").css("opacity", 1);  // ...for opacity
});

$(".ReadLess").click(function() {
    var $this = $(this);
    var cat = $this.closest(".cat");
    cat.css("max-height", "230px");
    $this.css("opacity", 0);
    cat.find(".ReadMore").css("opacity", 1);
});

但是，如果您使用类而不是直接操作来控制可见性和高度，它会简单得多。这是一个简单的例子：

$(document).on("click", ".ReadMore", function() {
  // Use `this` to figure out what entry we're in
  var entry = $(this).closest(".Entry");
  
  // Show more
  entry.addClass("ShowMore");
});
$(document).on("click", ".ReadLess", function() {
  // Use `this` to figure out what entry we're in
  var entry = $(this).closest(".Entry");
  
  // Don't show more
  entry.removeClass("ShowMore");
});
// Note that unless you really need separate handlers,
// you could just use a single one:
// $(document).on("click", ".ReadMore, .ReadLess", function() {
  // $(this).closest(".Entry").toggleClass("ShowMore");
// });

/* Normally, "more" isn't showing */
.Entry .More {
  display: none;
}
/* But when we add ShowMore to the entry, it is */
.Entry.ShowMore .More {
  display: block;
}
/* Also make the div taller and give it a border when showing more, just as an example */
.Entry.ShowMore {
  height: 10em;
  border: 1px solid #ddd;
}
/* Float our "buttons" */
.ReadMore, .ReadLess {
  float: right;
}
/* Normally, "ReadLess" isn't showing */
.Entry .ReadLess {
  display: none;
}
/* But it is when we're showing more */
.Entry.ShowMore .ReadLess {
  display: inline;
}
/* When we're showing more, don't show "ReadMore" */
.Entry.ShowMore .ReadMore {
  display: none;
}

<div class="Entry">
  <span class="ReadMore">more</span>
  <span class="ReadLess">less</span>
  First entry - this is the text always shown
  <div class="More">
    First entry - this is only shown when there's more
  </div>
</div>
<div class="Entry">
  <span class="ReadMore">more</span>
  <span class="ReadLess">less</span>
  Second entry - this is the text always shown
  <div class="More">
    Second entry - this is only shown when there's more
  </div>
</div>
<div class="Entry">
  <span class="ReadMore">more</span>
  <span class="ReadLess">less</span>
  Third entry - this is the text always shown
  <div class="More">
    Third entry - this is only shown when there's more
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

我使用类来控制正在发生的事情，而不是直接调用css，但概念是相同的。