Jquery console.logは2つの異なるオブジェクトを提供します

Question

私はJqueryの初心者です。今のところ、私は基本的な「Read less」と「Read More」ボタンを作ろうとしています。私は多くのことが働いていますが、私を悩ませているものがあります。ここに私のコードのビットがあります：

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

ヨーヨーが見UCANのように、彼らはほぼ同じです。 readmore関数は私にとって完璧に機能します。しかし、それほど読んでいないことはありません。 .catは良い高さになりますが、Readmoreは表示されないように見えます。私はそれをログに記録しようとしました、そして、私は少しのdeffierenceを参照して、それは意味し、どのように私はそれを働かせます。

EDIT：

ここでは、2つのボタンの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性がありません理由.ReadLess#6セレクタの最初の例では、lengthは1であり、1つの要素を意味0性があるのに対し、すなわち、（jQueryのオブジェクトは、ビット列のようなもの）です一致した

あなたが投稿したHTMLを見ると（それを生成するサーバー側のコードが十分に近い）、複数の要素がid="6"（など）あります。これは無効です。という要素が1つしかありません。ドキュメントには、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); 
}); 

しかし、あなたはクラスではなく、直接操作と可視性と高さをコントロールしている場合、それはずっと簡単になります

は、だから私は、あなたがこれを行うことが疑われます。ここでは簡単な例です：私はむしろ、直接 css通話よりも何が起こっているのかを制御するためのクラスを使用しました

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

が、概念は同じです。