阅读更多功能无法使用 vanilla javascript

Question

我是 javascript 的新手。我正在尝试使用 vanilla javascript 创建 read more/read less 功能，但我遇到了问题。每当我尝试获取和更改 data-address 属性时，它都会给我一个未定义的错误。我不知道我哪里弄错了。

感谢您的帮助。

代码如下：

index.html

<div class="col s12" id="address-col">
    <p  class="address"  style="height:50px;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, illum Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas esse suscipit temporibus consectetur iure quasi magni tenetur quia reprehenderit nesciunt, a nobis, quidem autem consequatur, hic aperiam modi excepturi delectus quo odio quaerat. Sunt id illo praesentium dolorum, inventore iusto?
    </p>
    <span class="read-more" data-address="0">Read more</span>
</div>

app.js


    var read_more = document.querySelector(".read-more");// read more button
    console.log(read_more);
    var address_div = document.querySelector("#address-col");// content DIV
    console.log(address_div);
    var address_content = document.querySelector(".address"); // content under the DIV
    var intro_height = address_content.offsetHeight; // height of the content
    var address_flag = read_more.getAttribute("data-address"); // fetching attribute of the button
    console.log(address_flag);

    read_more.addEventListener("click",introexpand);
    function introexpand(){
        if(address_flag == 0){
            address_div.style.maxHeight= "none";
            address_div.style.overflow = 'none';
            address_flag=read_more.setAttribute("data-address", "1");
            console.log(address_flag);
        }
        else if(address_flag == 1){
            address_div.style.maxHeight= '12px'; 
            address_div.style.overflow = 'none';
            address_flag=read_more.setAttribute("data-address", "0");
            console.log(address_flag);

        }

    }

Answer 1

setAttribute() 方法 returns 没有（什么等于 undefined 值）。

如果你想记录 data-address 属性的新值，你应该再读一遍：so:

            address_flag=read_more.setAttribute("data-address", "1");
            address_flag = read_more.getAttribute("data-address");
            console.log(address_flag);

除此之外，您应该重写 introexpand() 函数。您应该在函数的开头获取值 address_flag 属性（因为 address_flag 是具有简单类型数据的变量 [在本例中为字符串]，并且您应该知道 JavaScript 中的简单类型数据做没有参考特征，并且您没有获得此特定属性的最新值）：

    function introexpand(){
        address_flag = read_more.getAttribute("data-address");
        if(address_flag == 0){
            address_content.style.maxHeight= "0px";
            read_more.setAttribute("data-address", "1");
        }
        else if(address_flag == 1){
            address_content.style.maxHeight= '25px'; 
            read_more.setAttribute("data-address", "0");
        }
    }

更重要的是：

'none' 对于 css overflow 不存在（您可以使用 overflow: hidden 或 display: none）。
address_content 是 DOM 中更适合设置 maxHeight 值的元素（因为在那个元素上你设置了 overflow: hidden，所以 maxHeight css 会有一些目标）

Answer 2

我希望您期待如下所示的输出：

var read_more = document.querySelector(".read-more"); // read more button
console.log(read_more);
var address_div = document.querySelector("#address-col"); // content DIV
console.log(address_div);
var address_content = document.querySelector(".address"); // content under the DIV
var intro_height = address_content.offsetHeight; // height of the content
var address_flag = read_more.getAttribute("data-address"); // fetching attribute of the button
console.log(address_flag);
address_content.style.maxHeight = "18px";

read_more.addEventListener("click", introexpand);

function introexpand() {
  if (address_flag == 0) {
    address_content.style.maxHeight = "50px";
    address_flag = read_more.setAttribute("data-address", "1");
    address_flag = read_more.getAttribute("data-address");
    read_more.innerText = "Read less";
    // console.log(address_flag);
  } else if (address_flag == 1) {
    address_content.style.maxHeight = '18px';
    address_flag = read_more.setAttribute("data-address", "0");
    address_flag = read_more.getAttribute("data-address");
    read_more.innerText = "Read more";
    // console.log(address_flag);

  }

}

<div class="col s12" id="address-col">
    <p  class="address"  style="max-height:50px;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, illum Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas esse suscipit temporibus consectetur iure quasi magni tenetur quia reprehenderit nesciunt, a nobis, quidem autem consequatur, hic aperiam modi excepturi delectus quo odio quaerat. Skunt id illo praesentium dolorum, inventore iusto?
    </p>
    <span class="read-more" data-address="0">Read more</span>

但是，我的建议是玩这个例子：https://www.w3schools.com/howto/howto_js_read_more.asp 这对 "Read More Read Less Feature" 和大多数在他们的网站上使用自己定制的人来说更好。希望对您有所帮助，谢谢 :)

阅读更多功能无法使用 vanilla javascript

Read more functionality is not working using vanilla javascript

javascript

undefined