1

我很高兴阅读有关使用切换来单击并显示以及单击和隐藏文本的帖子（如何使用 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();
}

当然，您必须调用showmeHTML 代码，而不是SHOWME，因为 Javascript 是区分大小写的，并且您必须将 id 添加list到要切换的元素中。

如果您打算使用 class 切换元素showMe，那将是：

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

showme('showMe')你用而不是调用它showme('list')。

您还可以在 Javascript 代码中绑定事件，而不是使用 inlineonclick属性。您ready为此使用事件，以便在页面准备好后绑定事件，以便链接存在：

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