Jquery console.log提供了两个不同的对象

Question

我是Jquery的新手，所以我给自己一些小事要做。现在，我试图做一个基本的“少阅读”。和“阅读更多”＆＃39;按钮。我有很多工作，但有一件事让我烦恼。这是我的一些代码：

$(".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看起来并不像它应该的那样。我试着控制登录它，我看到了一些deffierence，这是什么意思，我怎么让它工作。

编辑：

这里是两个按钮的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为1，并且其中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);
});

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

＆＃13;

＆＃13;

$(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");
// });

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我已经使用类来控制正在进行的操作而不是直接css次调用，但概念是相同的。