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

1度ボタンを押すと、html 部分は、<span id="off" >OFF</span> に 正常に切り替わるのですが、2度目にボタンを押すと、そのままで、<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>

A 回答 (2件)

こんな風にしてください



$(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';
});
});
});
    • good
    • 1
この回答へのお礼

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

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

こんにちは



$(○○)で取得できるのはいわゆる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>
    • good
    • 1
この回答へのお礼

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

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

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報