注目キーワード
  1. RUN
  2. ブログ

【jQuery clickイベント】 クリックされたら文字や画像を変える

【jQuery clickイベント】クリックしたら文字を変える

[html]

<body>
<p id=”hello”>hello</p>
</body>
[js]
$(function () {
$(“#test”).click(function () {
if ($(this).hasClass(‘hello’) == false) {
$(this).text(“hello”).addClass(‘hello’);
} else {
$(this).text(“helloworld”).removeClass(‘hello’);
}
});
});

【jQuery clickイベント】クリックしたら画像を変える

[html]

<body>
  <div>
    <img class=”city” src=”blog/city.jpg” alt=””>
  </div>
</body>
[js]
$(function () {
  $(‘.city’).click(function () {
    if ($(this).hasClass(‘run’) == false) {
      $(this).attr(‘src’,’blog/run4.jpeg’).addClass(‘run’);
    } else {
      $(this).attr(‘src’,’blog/run3.jpeg’).removeClass(‘run’);
    }
  });
});
最新情報をチェックしよう!