我想把HTML从'OFF'& # 39;在# 39;使用onclick事件，就像切换一样

你可以试试:

<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属性了

尝试设置单个点击处理程序来检查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>

你可以这样做:

var p = $('.sample p');
p.html( p.html()=="ON" ? "OFF" : "ON" );

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

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

检查小提琴

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

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

JS Fiddle demo.

如果你想使用命名函数，但是:

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

JS Fiddle demo.

扩展此函数，使其可用于其他元素:

<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提琴演示

让我来帮你写代码:

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

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

只是一个想法:

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

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