Question

检查前两个有READ MORE按钮的方框。点击它们后，它们会展开一个段落。

现在我想要它就像当我点击它时，它应该展开文本并将按钮值从“READ MORE”更改为“CLOSE”。再次单击“关闭”，它应该将值更改为“READ MORE”。

我搜索了很长时间，看看如何在onClick上发起多个事件，但是我看到有人说在其中使用了;，有些人说是做了一个新功能并且放了两个函数它

现在我尝试在其中创建一个包含2个函数的新函数（一个用于扩展段落，另一个用于更改按钮的值，但是我失败了。（我是JS的新手）。

请帮助。先感谢您！我在页面上的代码：

按钮代码：

<p style="text-align: right;"><input id="button12" style="background-color: #eca200; color: #ffffff;" onclick="return toggleMe('para1')" type="button" value="Read more" /></p>

脚本：

<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>

Answer 1

我注意到你正在使用jQuery。

您可以使用切换方法。

更改html链接。添加一个expander类，并使用data属性来标识段落id

   <p style="text-align: right;">
       <input id="button12" data-toggle="para1" class="expander" style="background-color: #eca200; color: #ffffff;" type="button" value="Read more" />
   </p>

JS

    $(".expander").click(function() {
        var self = $(this);
        $("#" + self.data('toggle')).slideToggle(500, function () {
            if ($("#" + self.data('toggle')).is(':visible')) { // paragraph is open
                self.val("Close");
            } else { // paragraph is closed
                self.val("Read More");
            }
        });
    });

Answer 2

我认为最简单的方法是设置一个布尔变量。换句话说，让我们说它从页面开头的dclaration开始。

var hasbeenclicked = false;

然后，在第一次点击后

hasbeenclicked = true;

第二次点击后

hasbeenclicked = false;

调用该函数时，它会检查变量并进行相应的操作。以下不是真正的JS ....

if hasbeenclicked = true {

  do some stuff;

}

其他{

  do some other stuff;

}

这是完成你想要做的事情的简单方法。

其他信息：

使用两个带有单独ID的DIV标签。一个用于段落，一个用于“标签”。使用getelementbyID来适当地改变每一个。

JS扩展onClick多个事件

2 个答案: