実現したいこと
wordpressでページを作っています。
https://parnasse.conohawing.com/waterful_remake/mineral-water-test2/
にて、
Delicious Waterというセクションのクリックとホバーイベントを作っています。
やりたいこととしては
・#e-n-tabs-title-1281がホバーされたときに、e-n-tabs-title-1281の文字と左のアイコン画像を白くし、ホバーを外すと文字もアイコン画像も黒くなる
・#e-n-tabs-title-1282がホバーされたときに、e-n-tabs-title-1282の文字と左のアイコン画像を白くし、ホバーを外すと文字もアイコン画像も黒くなる
・#e-n-tabs-title-1283がホバーされたときに、e-n-tabs-title-1283の文字と左のアイコン画像を白くし、ホバーを外すと文字もアイコン画像も黒くなる
かつ、
・#e-n-tabs-title-1281がクリックされたときに、e-n-tabs-title-1281の文字と左のアイコン画像を白くし、#e-n-tabs-title-1282と#e-n-tabs-title-1283の文字とアイコン画像を黒いものに差し替える
・#e-n-tabs-title-1282がクリックされたときに、e-n-tabs-title-1282の文字と左のアイコン画像を白くし、#e-n-tabs-title-1281と#e-n-tabs-title-1283の文字とアイコン画像を黒いものに差し替える
・#e-n-tabs-title-1283がクリックされたときに、e-n-tabs-title-1283の文字と左のアイコン画像を白くし、#e-n-tabs-title-1281と#e-n-tabs-title-1282の文字とアイコン画像を黒いものに差し替える
これらのホバーイベントとクリックイベントを二つ書くと中身が競合して理想の動きになりません。
そのため特定の要素がクリックされていない時にホバーイベントを発火させればいいのではと考えましたが、書き方が分かりません。
例えば要素がクリックされたときは
$('#button').on('click', function() {
alert("クリックされました");
});
のように書きますが、この場合#buttonがクリックされていない時というのはどのように記述すればよろしいでしょうか?
例えば、
jQuery(function() {
//#e-n-tabs-title-1281がクリックされていない時
if !( jQuery('#e-n-tabs-title-1281').on('click', function() {
});)){
console.log('クリックされていません');
}
});
↑このように書いてもエラーになります。
どなたかお助け下さい。
該当のソースコード
index.html
1 2<div class="flow_slider_button2"> 3 <div class="slider_sankaku slider_sankaku1"></div> 4 <div class="slider_sankaku slider_sankaku2"></div> 5 <div class="slider_sankaku slider_sankaku3"></div> 6</div>
jQuery
1<script> 2 jQuery(function(){ 3 jQuery('.flow_slider_button2').insertAfter('.e-n-tabs-heading'); 4// jQuery('#e-n-tabs-title-1283 img').addClass('slider_sankaku2_img'); 5 6 7 8 jQuery('#e-n-tabs-title-1281').click(function() { 9 jQuery('#e-n-tabs-title-1281 img').attr('src', 'http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/水滴アイコン4-1_加工_色変更.png'); 10 jQuery('#e-n-tabs-title-1282 img').attr('src', 'http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/富士山のフリーアイコン.png'); 11 jQuery('.slider_sankaku2').css('visibility','hidden'); 12 jQuery('.slider_sankaku3').css('visibility','hidden'); 13 14 jQuery('.slider_sankaku1').css('visibility','visible'); 15 }); 16 17// 二つ目をクリックした時 18 jQuery('#e-n-tabs-title-1282').click(function() { 19 jQuery('#e-n-tabs-title-1281 img').attr('src', 'http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/水滴アイコン4-1.png'); 20 jQuery('#e-n-tabs-title-1282 img').attr('src', 'http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/富士山のフリーアイコン-1.png'); 21 jQuery('#e-n-tabs-title-1283 img').attr('src', 'http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/森アイコン.png'); 22 jQuery('.slider_sankaku1').css('visibility','hidden'); 23 jQuery('.slider_sankaku3').css('visibility','hidden'); 24 jQuery('.slider_sankaku2').css('visibility','visible'); 25 }); 26 27 // 三つ目をクリックした時 28 jQuery('#e-n-tabs-title-1283').click(function() { 29 jQuery('#e-n-tabs-title-1281 img').attr('src', 'http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/水滴アイコン4-1.png'); 30 jQuery('#e-n-tabs-title-1282 img').attr('src', 'http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/富士山のフリーアイコン.png'); 31 jQuery('#e-n-tabs-title-1283 img').attr('src', 'http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/森アイコン-1.png'); 32 jQuery('.slider_sankaku1').css('visibility','hidden'); 33 jQuery('.slider_sankaku2').css('visibility','hidden'); 34 jQuery('.slider_sankaku3').css('visibility','visible'); 35 }); 36 37 38}); 39console.log('slider_button2.phpの読み込み'); 40</script> 41 <script> 42// ホバーイベント 43// jQuery(function() { 44 jQuery('#e-n-tabs-title-1281').hover( 45 function() { 46 jQuery('#e-n-tabs-title-1281 img').attr('src', 'http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/水滴アイコン4-1_加工_色変更.png'); 47 }, 48 function() { 49 jQuery('#e-n-tabs-title-1281 img').attr('src', 'http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/水滴アイコン4-1.png'); 50 } 51 ); 52}); 53 54 jQuery(function() { 55 56 jQuery('#e-n-tabs-title-1282').hover( 57 function() { 58 jQuery('#e-n-tabs-title-1282 img').attr('src', 'http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/富士山のフリーアイコン-1.png'); 59 }, 60 function() { 61 jQuery('#e-n-tabs-title-1282 img').attr('src', 'http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/富士山のフリーアイコン-1.png'); 62 } 63 ); 64}); 65 66 67 68 69</script> 70
試したこと
下記のように追記しても上手くいきませんでした。
jQuery
1<script> 2 var el = document.getElementById('e-n-tabs-title-1281'); 3 el.onclick = function(){ 4 // 要素をクリックしたときの処理 5 console.log('e-n-tabs-title-1281'); 6 } 7 el.onblur = function(){ 8 // 他の場所をクリックしたときの処理 9 console.log('e-n-tabs-title-1281以外'); 10 jQuery(function() { 11 12 jQuery('#e-n-tabs-title-1281').hover( 13 function() { 14 jQuery('#e-n-tabs-title-1281 img').attr('src', 'http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/水滴アイコン4-1_加工_色変更.png'); 15 }, 16 function() { 17 jQuery('#e-n-tabs-title-1281 img').attr('src', 'http://parnasse.conohawing.com/waterful_remake/wp-content/uploads/2023/07/水滴アイコン4-1.png'); 18 } 19 ); 20}); 21 22 } 23 24 25 26</script>
補足情報(FW/ツールのバージョンなど)
WordPress 6.2.2
0 コメント