c# - データグリッドのjQueryのより少ないボタンは、より多くクリックされたときに機能しますが、より少なくは機能しません

Question

検索結果に多かれ少なかれコンテンツ ブロックを表示するボタンがあります。[More] をクリックすると必要に応じて展開されますが、[Less] をクリックしても何も起こりません。preventDefault(e)それは自分のラインと関係があるように感じます。コードは以下...

$(".btnMore").click(function (e) {
    e.preventDefault(e);
    if ($(this).attr('value', 'More')) {
        $(this).parent().prev().switchClass("abstractText", "abstractTextNoHeight", 500, "swing");
        $(this).attr('value', 'Less');
    }
    else if ($(this).attr('value', 'Less')) {
        $(this).parent().prev().switchClass("abstractTextNoHeight", "abstractText", 500, "swing");
        $(this).attr('value', 'More');
    }

});

Answer 1

これは、「attr()」を使用して属性値をチェックする間違った方法です。

if($(this).attr("value", "More"))

"value" 属性の値を "More" に設定し、 を返しundefinedます。あなたがする必要があるのはこれです：

if($(this).attr("value") == "More")

また

if(this.getAttribute("value") == "More")

JavaScript で十分な場合は、jQuery を使用する必要はありません。$()aroundがないことに注意してthisください。JS 関数 ( getAttribute) を使用しているため、jQuery コレクションを作成する必要はありません。これにより、コードがより高速かつ単純になります。

Answer 2

これを試して：

$(".btnMore").click(function (e) {
e.preventDefault(e);
if ($(this).attr('value')=='More') {
    $(this).parent().prev().switchClass("abstractText", "abstractTextNoHeight", 500, "swing");
    $(this).attr('value', 'Less');
}
else if ($(this).attr('value')=='Less') {
    $(this).parent().prev().switchClass("abstractTextNoHeight", "abstractText", 500, "swing");
    $(this).attr('value', 'More');
}

});

Answer 3

このようにして終わった：

//more/less button
$(".btnMoreText a").click(function (e) {
    e.preventDefault();
    rowClicked = false;
    $(this).parent().parent().prev().switchClass("abstractText", "abstractTextNoHeight", 500, "swing");
    $(this).parent().addClass("hidden");
    $(this).parent().next().removeClass("hidden");
});

$(".btnLessText a").click(function (e) {
    e.preventDefault();
    rowClicked = false;
    console.log($(this).parent().parent().prev());
    $(this).parent().parent().prev().switchClass("abstractTextNoHeight", "abstractText", 500, "swing");
    $(this).parent().addClass("hidden");
    $(this).parent().prev().removeClass("hidden");
});