Question

好的伙计们，我向你们致以诚挚的问候！我在jquery中遇到过这个新手问题。我喜欢jquery可以做的伟大动画和所有那些很酷的Mozilla东西！好的，顺便说一下！我有几个具有不同ID的DIV元素，我一直试图通过传递给javascripts onclick（）方法的函数来显示/隐藏。我已经阅读了问题部分中提供的几个例子，但我不明白为什么我在做什么不起作用！

现在这是我的jquery代码：

$(document).ready(function(){ 
   var toggle_btn = $('.toggle-button');
   var contentToggle = function(element){
      toggle_btn.click(function(e){
         If($(this).hasClass('switch-off')){
            $(this).removeClass('switch-off');
            $(this).addClass('switch-on');
            $('#' element).hide();
         }else{
            $(this).removeClass('switch-on');
            $(this).addClass('switch-off');
            $('#' element).show();
         }
         e.preventDefault();
      });
   } 
   contentToggle();
});

以下是我的html的路径：

<a href='' onclick='contentToggle('color-list') class='toggle-button switch-off'>
<div id="color-list">Container Contents</div>

我的css：

#color-list{display:none;}

不幸的是，这似乎不起作用，但我试过了！请你帮我们指点正确的方向吗？我没做错什么？

Answer 1

代码存在一些问题，一些问题由评论指出，但主要的一个问题是你如何接近onClick事件。您正在将函数内部的单击事件连接起来，然后调用它，您应该在$(document).ready范围内定义它，同样在执行此操作后也不需要内联onClick事件。

这是一个带有“推荐”代码的JSFiddle。我希望它可以帮助你。

http://jsfiddle.net/V54fJ/2/

HTML：

<button class='toggle-button switch-on'>Test</button> <div id="color-list">Container Contents</div>

JAVASCRIPT：

$(document).ready(function(){ 
    $('.toggle-button').click(function(event){
        if($(this).hasClass('switch-off')){
            $(this).removeClass('switch-off');
            $(this).addClass('switch-on');
            $('#color-list').hide();
        } else {
            $(this).removeClass('switch-on');
           $(this).addClass('switch-off');
           $('#color-list').show();
        }
        event.preventDefault();
    });
});

如果您仍想保留一个单独的功能，您仍然可以将ElementId作为变量发送，您可以执行以下操作：（http://jsfiddle.net/V54fJ/3/）

$(document).ready(function(){   

     $('.toggle-button').on('click', 
                            function(event){
                                toggleVisibility(this,'color-list');
                                event.preventDefault();
                            });

     function toggleVisibility(caller,elementId)
     {
      if($(caller).hasClass('switch-off')){

             $(caller).removeClass('switch-off');
             $(caller).addClass('switch-on');
             $('#'+elementId).hide();
     }
      else{

             $(caller).removeClass('switch-on');
             $(caller).addClass('switch-off');
             $('#'+elementId).show();
     }

     }  });

Answer 2

如果你正在使用jQuery，你真的不需要内联JavaScript调用。修改你的HTML -

<a href='' class='toggle-button switch-off'>Click Me</a>
<div id="color-list">Container Contents</div>

对jQuery的一些修改将完成交易 -

var contentToggle = function(element){
    if( $(element).hasClass('switch-off')){ // lowercase i on 'if'
        $(element).toggleClass('switch-off switch-on');
        $('#color-list').hide();
     }else{
        $(element).toggleClass('switch-on switch-off');
        $('#color-list').show();
     }
  } 

$('.toggle-button').click(function(e) {
    e.preventDefault();
    contentToggle( $(this) ); // pass the toggle-button to the function
});

在您的原始文件中，您将element传递给该函数并尝试在函数内使用$(this)。 {for} $(this)未在contentToggle中定义。

这是一个演示 - http://jsfiddle.net/jayblanchard/zZd8R/（请记住，第一次点击时不会显示颜色列表，因为第一次点击仍会指示列表被隐藏）

将ID传递给jquery函数

2 个答案: