jquery ボタンでoff on

下記のような、spanタグの中の文字の表示の切り替えと、その際にidも変更したいと思いますが、

１度ボタンを押すと、html　部分は、<span id="off" >OFF</span> に 正常に切り替わるのですが、２度目にボタンを押すと、そのままで、<span id="on" >ON</span>に戻りません。これはどうしてなのでしょうか?



<script>
$(function(){

$("#btn").click(function(){

if($('#on')){
$('span').html('OFF');
$('span').attr('id','off');
}else{
$('span').html('ON');
$('span').attr('id','on');
}
});

});
</script>

<button id="btn">
<span id="on" >ON</span>
</button>

No.2 ベストアンサー 回答者： yambejp 回答日時： 2017/06/21 10:48

こんな風にしてください

$(function(){
$("#btn").on('click',function(){
$(this).find('span').html(function(i,j){
return j=='OFF'?'ON':'OFF';
}).attr('id',function(i,j){
return j=='off'?'on':'off';
});
});
});

この回答へのお礼

ありがとうございます。とても参考になります。特に、メソッドチェーンにつながっているオブジェクトに関数を入れて、条件分岐したものをreturnで値を返しているやり方は、知りませんでしたので、とても勉強になります。ただ、function(i,j) の 第二引数にセットされた値と、条件判定している点ので、なぜ第二引数なのかが分かりませんでした。ということは、第一引数のi の意味もさらに分からなくなりました。まだまだだと痛感しました。復習してみます。

お礼日時：2017/06/21 18:29

No.1 回答者： fujillin 回答日時： 2017/06/21 09:19

こんにちは

$(○○)で取得できるのはいわゆるjQueryオブジェクトです。（DOM要素そのものではありません）。

ご質問の動作の原因となっているのは、on、offの判断を
　if($('#on')){ ～～～
でなさろうとしているのだと推測しますが、上記のようにオブジェクトが返されるので、（ ）内の結果は常にTUREとなることによるものと考えられます。

実際は『id=onの要素が存在するかどうか』で判断なさりたいのでしょうから、例えば
　 if($('#on').length){ ～～
のような条件にすれば動作するものと思います。


以下は、おまけのおせっかいですが・・・
ご提示のスクリプト場合、span要素にもidを振って、さらにそのidを変更するということをなさっていますが、「ボタン要素の子要素のspan」として特定できるので、idは無くても済みます。
また、id（=個別の識別子）を変更するのはそれなりの場合だと思いますが、ご提示のケースでは要素そのものが変わるわけでもないので、クラスなどを用いるのが一般的ではないでしょうか。
さらに、
　$('span').attr('id','off');
という記述は、spanが複数あるような文書の場合には、文法違反の原因となりかねません。

同じようなボタンを複数設置したい場合などにも、idを利用する方法だとそれなりに面倒になります。
なんとなくの雰囲気で、以下のような考え方もあるよと言う例。
（複数設置可能で、個別に動作する例です）

<style type="text/css">
button.toggle { width:4em; background-color: #FAA; }
button.toggle.ON { background-color: #AAF; }
</style>


<script type="text/javascript">
$(function(){
$("button.toggle").click(function(){
var html = $(this).hasClass("ON")?"OFF":"ON";
$(this).toggleClass("ON").attr("value",html).html(html);
});
});
</script>


<p>
<button class="toggle ON" value="ON">ON</button>
<button class="toggle ON" value="ON">ON</button>
</p><p>
<button class="toggle ON" value="ON">ON</button>
<button class="toggle" value="OFF">OFF</button>
</p>

この回答へのお礼

jQueryのオブジェクトとjavascriptの構文が混同していました。まったく気づきませんでした。ありがとうございます。加えて、例としての提示していただいたコードがとても参考になります。これまで知っていたものとは異なりましたので、とても参考になりました。

お礼日時：2017/06/21 17:32