javascript - 更改按钮上的跨度文本

标签 javascript jquery html css

<分区>

我在 Wordpress 中使用一个简码来生成这个按钮。

下面的代码是由短代码生成的,我试图在不更改这部分代码段的任何部分的情况下更改文本。

<div id="" class="addquotelistlink">
    <div class="quotelistadd">
        <span class="dvin_wcql_shopbtn_wrap">
            <button rel="nofollow" data-product_id="4246" data-product_sku="D410104" data-quantity="1" type="button" class="button alt addquotelistbutton product_type_simple">Request a Quote</button></span>

            <span class="dvin_wcql_shopbtn_ajaxico_wrap"><img style="display: none;border:0; width:16px; height:16px;" src="#" class="ajax-loading-img ajax-loading-img-bottom" alt="Working..."></span>
    </div>

    <div class="quotelistaddedbrowse" style="display:none;">
        <a href="#">In Quotelist</a>
    </div>
    <div class="quotelistexistsbrowse" style="display:none;;"><a href="#">In Quotelist</a></div>
    <div style="clear:both"></div>
    <div class="quotelistaddresponse"></div>
</div>

现在我想在按下按钮时添加一些 onclick 效果。因此,当单击按钮时,我希望它更改颜色和文本。我已经想出了如何更改颜色,我只需要更改文本方面的帮助。我一直在寻找不同的 jquery 方式,但我无法弄清楚。所以现在我有这样的东西。

所以当 toggleClass 'active' 被激活时,它会执行 css 类。

<script>
jQuery('.addquotelistbutton').click(function(){
   jQuery(this).toggleClass('active');
});

</script>

//CSS

.addquotelistbutton.active {
    background-color: red;  
}

现在有人可以帮我更改跨度文本吗?我尝试了以下但没有用。

$('.addquotelistbutton').html('Added to Wishlist');

最佳答案

使用 .text(); 并检查事件类以将文本更改为 Added to Wishlist 或将其返回到 Request a Quote

 jQuery('.addquotelistbutton').click(function(){
        jQuery(this).toggleClass('active');
        if(jQuery(this).hasClass('active')){
          jQuery(this).text('Added to Wishlist');
        }else{
          jQuery(this).text('Request a Quote');
        }
    });

Note: your code $('.addquotelistbutton').html('Added to Wishlist'); should work also but you just need to use $(this) inside click event

关于javascript - 更改按钮上的跨度文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34072373/

相关文章:

javascript - 文件选择/文件 API - 将文件发送到嵌入式 PDFObject

javascript - Jquery 延迟 RSS feed 替换页面中的所有 html

javascript - 使用 JavaScript 为所有 P 标签分配时间、日期和城市

javascript - 如何从数组中提取某些元素?

javascript - Node 和 Express 简单 POST - 400 错误请求

javascript - 如何在javascript中访问其他对象内的对象内的属性

javascript - 完整日历事件源数据在参数中传递空值

html - 通过 ParseForm() 检索表单选项 ID

javascript - 无法在 jqueryUI 中重新绑定(bind)可拖动事件

JavaScript 实例函数与原型(prototype)函数