Question

我有一个else if语句，用于显示或隐藏一个read more按钮，具体取决于div中的字符数。

实际的if语句似乎有用 - 它删除了read more按钮，但是如果看起来不起作用的话。

我的代码在

下面

$('.hotel-copy').each(function () {
    if ($(".sidebar-box").length < 194) {  // if count is less than 193
        $(".read-more").hide();
    }
    else if ($(".sidebar-box").length > 194) {  // if count is greater than 193
        $(".read-more").show();
    }
});

HTML

<div class="hotel-copy">
   <div class="sidebar-box">
      @if (!string.IsNullOrWhiteSpace(hotel.Description))
         {
            <p>@hotel.Description</p>
            <p class="read-more"><a href="javascript:void(0);" class="button">Read more</a></p>
          }
    </div>
 </div>

CSS

/* READ MORE */
.accommodation-container .sidebar-box {
    height: 120px;
    position: relative;
    overflow: hidden;
}

    .accommodation-container .sidebar-box .read-more {
        position: absolute;
        bottom: 0px;
        left: 0;
        width: 100%;
        /* text-align: center; */
        margin: 0;
        padding: 20px 0 0px 0;
        background-image: linear-gradient(to top, #f7f7f7, #f7f7f7);
    }

非常感谢任何帮助。

由于

Answer 1

如果要检查元素中文本的字符数，请使用text().length。 jQuery对象的length属性（正如您最初使用的那样）用于检索与您使用的选择器匹配的集合中包含的元素数。

另请注意，您可以通过向toggle()提供布尔值而不是单独的show() / hide()调用来缩短逻辑：

$('.hotel-copy').each(function () {
  $('.read-mode').toggle($(".sidebar-box").text().length >= 194);
});

最后，我将操作符修改为>=，因为当文本的长度恰好为194个字符时，没有任何案例覆盖。

Answer 2

使用此代码，将起作用：

DEMO ：https://codepen.io/creativedev/pen/jKwVXL

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='mdpoptag'>ABBA</div>
<div class='mdpoptag'>ABB</div>
<div class='mdpoptag'>AB</div>

Jquery else if语句似乎不起作用

2 个答案: