JS扩展onClick多个事件 [英] JS expand onClick multiple events

问题描述

请先查看此页面:Solarking - 关于我们

选中前 2 个带有阅读更多"按钮的框.单击它们时，它们会展开一个段落.

Check first 2 boxes which has a READ MORE button. On clicking them, they expand a paragraph.

现在我希望当我点击它时，它应该展开文本并将按钮值从阅读更多"更改为关闭".再次点击关闭"，它应该将值更改为阅读更多".

Now I want it to be like when I click on it, it should expand the text and change the button value to "CLOSE" from "READ MORE". And on again clicking on "CLOSE", it should change value to "READ MORE".

我搜索了很长时间以查看如何在 onClick 上触发多个事件，但我看到有人说在其中使用 ; ，有人说要创建一个新的function 并在其中放入 2 个函数.

I searched for long time to see how to fire multiple events on onClick, but I saw that some said to use a ; in them, some said make a new function and put 2 functions in it.

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

Now I tried to make a new function with 2 functions inside it (one to expand the paragraph, other to change value of button, but I failed. (I am new to JS).

请帮忙.先感谢您！我在页面上的代码:

Help please. Thank you in advance! Code I have on the page :

按钮代码:

<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>

推荐答案

我注意到你在使用 jQuery.

I noticed you are using jQuery.

您可以使用切换方法.

更改 html 链接.添加expander类，使用data属性标识段落id

Alter the html link. Add a class of expander and use the data attribute to identify the paragraph 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");
            }
        });
    });

这篇关于JS扩展onClick多个事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！