0

我想将 HTML 从“关闭”更改为“打开”。我可以通过使用一些 jQuery 和 .html 来做到这一点，如下所示：

HTML：

<div class="sample" onclick="run();"><p>OFF</p></div>

查询：

function run(){
  $('.sample p').html("ON");
}

但是，当我这样做时，我还想在另一个 onclick 事件上将其更改回“关闭”。我尝试过.. if/else 语句、变量和 switch 语句。似乎没有任何效果，是否有另一种切换html的首选方法？

使用我的谷歌搜索能力没有运气。

4

7 回答 7

1

尝试设置一个单击处理程序来检查 DIV 中的值，然后根据该值将其更改为 On 或 Off。

<div class="sample"><p>OFF</p></div>

<script>
    $(document).ready(function() { 
          run();
    });

    function run(){
      $('.sample').click(function() {
        if ($('.sample p').html() == "on")) {
              // Set to On
        } else {
             // Set to off
        }
    }
</script>
于 2013-06-04T22:02:26.457 回答
1

我建议远离内联事件处理：

$('.sample p').click(function(){
    $(this).text(function(i, t){
        return t === 'OFF' ? 'ON' : 'OFF';
    });
});

JS 小提琴演示。

但是，如果要使用命名函数：

function run(){
    $('.sample p').text(function(i,t){
        return t === 'OFF' ? 'ON' : 'OFF';
    });
}

JS 小提琴演示。

但是，要扩展此功能以使其可与其他元素一起使用：

<div class="sample" onclick="run(this);"><p>OFF</p></div>

和 jQuery：

function run(el){
    var self = el.nodeType === 1 ? $(el) : el;
    self.find('p').text(function(i,t){
        return t === 'OFF' ? 'ON' : 'OFF';
    });
}

JS 小提琴演示。

于 2013-06-04T22:02:53.070 回答
1

你可以这样做：

var p = $('.sample p');
p.html( p.html()=="ON" ? "OFF" : "ON" );
于 2013-06-04T22:03:04.727 回答
1

移动内联函数处理程序并将您的事件绑定到脚本文件或脚本标记中。

$('.sample').on('click' , function() {
    var $p = $('p', this);

    $p.text() === 'OFF' ? $p.text('ON') : $p.text('OFF');
});

检查小提琴

于 2013-06-04T22:03:34.657 回答
1

你可以试试这个：

HTML：

<div class="sample"><p>OFF</p></div>

JS：

jQuery(function($) {
    $('.sample p').on('click', function() {
        $(this).html($(this).html() == 'ON' ? 'OFF' : 'ON');
    });
});

使用 jQuery 后，无需向 HTML 标记添加 onclick 属性。

于 2013-06-04T22:05:00.537 回答
0

在这里，让我为您编写代码：

jQuery：

$(document).ready(function() {
    $("div.sample").click(function() {
        if ($("p", $(this)).html() == "ON") {
            $("p", $(this)).html("OFF");
        } else {
            $("p", $(this)).html("ON");
        }
    });
});

HTML：

<div class="sample">
    <p>ON</p>
</div>
于 2013-06-04T22:07:15.390 回答
0

只是一个想法：

http://jsfiddle.net/Mr2Mk/3/

HTML

<input class="toggle" type="checkbox"/>

CSS

input.toggle:after {
    content: "OFF";
    margin-left: 1.5em;
}

input.toggle:checked:after {
    content: "ON";
}

加上更多的糖，你可以把它变成这样：

http://dropthebit.com/15/iphone-like-ios5-toggle-buttons/

于 2013-06-04T22:17:30.820 回答