Question

我正在尝试在我之前添加到同一个div的类上使用jquery .click函数.click。新类正确地添加到div但我的$（“。two”）。click（function（）没有运行。我的第一个$（“。one”）。click（function）工作正常。我是想知道我是否使用了奇怪的逻辑，或者是否出现故障。任何帮助都将不胜感激！

<script>

$(document).ready(function() {    
  $( ".one" ).click(function() {
   $('.adventurevideoviewmore').addClass('two');
   $( ".adventure2" ).slideDown( 1000, function() {
   });
 });

 $( ".two" ).click(function() {
  $( ".adventure3" ).slideDown( 1000, function() {
  });
 });

});

</script>

这是我的HTML

 <div class="adventure2"></div>
 <div class="adventure3"></div>
 <div class="adventurevideoviewmore one" ><img src="images/homepage/viewmorebutton.png"/></div>

Answer 1

您需要使用事件委派：

 $( "body" ).on('click', '.two', function() {
    $( ".adventure3" ).slideDown( 1000, function() {
 });

Answer 2

您的$('.two')点击功能正在$(document).ready()上运行，但当时该类没有任何元素，因此该功能不受任何限制。您需要做的是在动画结束时添加.two类时向元素添加一个单击处理程序：

$(document).ready(function() {    
    $( ".one" ).click(function() {
        $('.adventurevideoviewmore').addClass('two');
        $( ".adventure2" ).slideDown( 1000, function() {
            $( ".two" ).click(function() {
                $( ".adventure3" ).slideDown( 1000, function() {});
            });
        });            
    });
});

这可能会让您感到头疼，因为用户仍然可以单击.one元素并再次添加处理程序。看起来你正在尝试创建某种向导。如果是这样，我建议采取略有不同的方法。

HTML

冒险是某种容器，如果它还没有

<div class="adventure-wizard" data-step="1" data-last="3">
    <div class="adventure1"></div>
    <div class="adventure2"></div>
    <div class="adventure3"></div>
    <div class="adventurevideoviewmore"><img src="images/homepage/viewmorebutton.png"/></div>
</div>

<强>的JavaScript

维护容器中数据的状态而不是元素上的类。这允许您查看更多按钮以始终使用相同的处理程序并增加向导。

$(document).ready(function() {

        // Setup the click event on the view more button to increment the step and
        // animate the appropriate adventure element until the last is reached
        $('.adventureviewmore').click(function () {
            var wizard = $(this).parent();
            var step = wizard.data('step');
            var last = wizard.data('last');

            // If the end is reached do nothing
            if (step === last)
                return;

            // Increment the step
            step++;

            // Animate the adventure for the next step
            $('.adventure' + step).slideDown(1000);

            // Store the step back on the wizard
            wizard.data('step', step);
        });
    });
});

Answer 3

当我添加第二个“两个”类时，我需要添加一个.delay，因此.adventure3幻灯片不会同时触发。非常感谢@Milind Anantwar，@ Alexander和@juan Mendes！

<script>
$( ".one" ).click(function() {
  $( ".adventure2" ).slideDown( 1000, function() {
  });

 $(".adventurevideoviewmore").delay(1000).queue(function(next){
  $(this).addClass("two");
  next();
 });
});

$( "body" ).on('click', '.two', function() {
  $( ".adventure3" ).slideDown( 1000, function() {
  });
});
</script>

以下是工作代码的小提琴：http://jsfiddle.net/cbart7421/j4er8r91/3/

on.click没有使用.addclass添加的类

3 个答案: