1

トグルを使用してクリックして表示し、クリックしてテキストを非表示にする方法に関する投稿 ( How to change toggle text on show hide using javascript ) を読んでとても興奮しましたが、コードを動作させることができませんでした。下線付きのハイパーリンクをクリックすると、テキストが表示されません。

In function.php:
add_action('wp_enqueue_scripts', 'my_scripts_method');
function my_scripts_method() {
wp_enqueue_script('SHOWME',get_template_directory_uri() . '/admin/wp-     
includes/js/jquery/SHOWME.js');
}



In ftp drive:
jQuery(document).ready(function($)
{
$(function showme(id)) {
    var divid = $(document.getElementById(id));
    $(if (divid.style.display == 'block') divid.style.display = 'none');
    $(else divid.style.display = 'block');
   }
    array('jquery')
);
   }
  });



  HTML in page:

  <a onclick="SHOWME('list');" href="#"><h3>Air Barrier Association of America (ABAA)     
  Certification Training</h3>
  </a>
  <div class="showMe" style="display: none;">This is a widget</div>
  <div class="showMe" style="display: none;">This is a widget</div>
  <div class="showMe" style="display: none;">Self Adhered &amp; Fluid Applied Installer         
  Training</div>
4

1 に答える 1

0

構文エラーがあるため、スクリプトは機能しません。

jQuery の使い方を誤解しています。$(...)これは、通常の Javascript コードから使用するライブラリであり、Javascript コードのすべての行を配置して使用するのではありません。

一歩一歩見ていきましょう。間違ったコードを削除すると、次のようになります。

function showme(id) {
  var divid = document.getElementById(id);
  if (divid.style.display == 'block') {
    divid.style.display = 'none';
  } else {
    divid.style.display = 'block';
  }
}

コードで jQuery を使用して同じことを行うと、次のようになります。

function showme(id) {
  var divid = $('#' + id);
  if (divid.is(':visible')) {
    divid.hide();
  } else {
    divid.show();
  }
}

toggleメソッドを使用して同じことを行うこともできます。

function showme(id) {
  $('#' + id).toggle();
}

もちろん、Javascript では大文字と小文字が区別されるshowmeため、 ではなく HTML コードで呼び出す必要があり、切り替えたい要素に id を追加する必要があります。SHOWMElist

class を使用して要素を切り替える場合は、次のshowMeようになります。

function showme(className) {
  $('.' + className).toggle();
}

showme('showMe')の代わりに で呼び出しますshowme('list')。

onclickinline属性を使用する代わりに、Javascript コードでイベントをバインドすることもできます。readyこれにはイベントを使用して、ページの準備ができた後にイベントがバインドされ、リンクが存在するようにします。

$(document).ready(function(){
  $('a').click(function(){
    showme('list');
  });
});
于 2013-02-11T20:31:52.553 に答える