在 JavaScript 中单击时更改变量值

Question

我正在使用 dribbble API 从 dribbble 获取我的作品。

我设置了一些 VAR 来帮助完成这个过程；

var dribbble = 'crobertson97';          
var limit = '10'; //items per page
var per_page = '&per_page='+limit+''; //url 
var accessToken = '12345678910'; //client
var url = 'https://api.dribbble.com/v1/users/'+dribbble+'/shots/?access_token='+accessToken+'&callback=?'+per_page; //url

我想添加一个查看更多按钮，如果单击该按钮将执行三件事；

按钮

<a id="readmore" class="btn btn-success white"> View More</a>

1. 将按钮文本从查看更多更改为查看更少
2. 将

   var limit = 10

   更改为

   20

   3.能够恢复 -->

   view less

Answer 1

在html中添加onclick函数：

<a id="readmore" class="btn btn-success white" onclick="buttonClick(this)"> View More</a>

并在JS中创建以下函数：

function buttonClick(but) {
    if(limit==10) {
        limit = 20;
        but.innerHTML= "View less";
    } else {
        limit = 10;
        but.innerHTML = "View more";
    }
}

仍然需要管理内容的显示，但是您没有提供太多关于您想要什么以及如何提供数据的信息！

Answer 2

非常简单，使用现代 Web API。

readmore.addEventListener('click', readmoreless);
var limit = 10;
function readmoreless(){
  if(limit == 10){
    readmore.innerHTML = "View Less";
    limit = 20;
  } else {
    readmore.innerHTML = "View More";
    limit = 10;
  }
}

<a id="readmore" class="btn btn-success white">View More</a>