c# - 数据网格中的 jQuery more less 按钮，在单击更多但不少于时有效

Question

我有一个按钮在搜索结果中显示或多或少的内容块。当我单击“更多”时，它会根据需要展开，但当我单击“更少”时没有任何反应。我觉得这和我的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。请注意缺少$()周围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");
});