0

我有一个链接(imp),当我单击此链接时,它会显示一个 div。在这个 div 上有一个减号来减少这个 div。当我减少这个 div 时,我会添加一个加号来再次显示这个 div。

问题只是在加号上。

$('.plusStep1').click(function() {
  $('#plus').empty();
  $('#step1').css('display','block');
  $(".close-step1 img")
    .attr("src", "http://4.bp.blogspot.com/_0AyNA9sRlIs/TAPH55KDj7I/AAAAAAAAIsU/_fjn6O2WguQ/s1600/424px-OCR-A_char_Hyphen-Minus.svg.png");

上面的代码似乎只有在我在控制台中执行时才有效!

这是对 fiddle 的测试

4

6 回答 6

1

.click不适用于动态创建的元素,如果要将函数绑定到在 DOM 加载后创建的元素,最好使用delegatehttp ://api.jquery.com/delegate/

因此,要将这个函数绑定到所有元素,无论是否在 DOM 之后创建,您都可以使用类似的东西;

$("#myContainer").on("click", ".PlusStep1", function() {
  $(this).toggleClass("chosen");
});

您的所有PlusStep1类元素都是具有 id 的元素的子元素(或后代)myContainer,即它们在其中,无论多深。

于 2012-08-27T07:36:07.120 回答
0

.click()不绑定到新创建的元素。您可以创建一个单独的函数来执行您想要的操作(在加号单击上)以及创建锚点调用时

bind('click', function() {
   seperateFunction();
})

更新:对不起,更容易live做到这一点(见jQuery doc

第二次更新:查看另一个 stackoverflow 帖子

于 2012-08-27T07:31:41.253 回答
0

将您的选择器更改为,$('#plus').click(function() {因为加号没有 th 类plusStep1但有 idplus

我保存了更新的小提琴

于 2012-08-27T07:34:14.970 回答
0

试试这个

jQuery(function( $ ){

        // Get a reference to the container.
        var containerStep1 = $( "#step1" );

        // Bind the link to toggle the slide.
        $( ".impaye" ).click(
        function( event ){
        // Prevent the default event.
        event.preventDefault();

        // Toggle the slide based on its current
        // visibility.
        if (containerStep1.is( ":visible" )){
        containerStep1.slideUp( 1000 );
        } else {
        containerStep1.slideDown( 1000 );
        }
        }
        );


        // CLOSE STEPS

        $(".close-step1 img").attr("src", "http://4.bp.blogspot.com/_0AyNA9sRlIs/TAPH55KDj7I/AAAAAAAAIsU/_fjn6O2WguQ/s1600/424px-OCR-A_char_Hyphen-Minus.svg.png");
        // STEP 1
        $('.close-step1').click(function () {
            $('#plus').empty();
            $('.close-step1').clone().appendTo('#plus');
            $('#plus .close-step1').addClass('plusStep1');

            containerStep1.slideToggle("slow", function () {
                if ($("#step1").is(':visible')) {
                    $(".close-step1 img").attr("src", "http://4.bp.blogspot.com/_0AyNA9sRlIs/TAPH55KDj7I/AAAAAAAAIsU/_fjn6O2WguQ/s1600/424px-OCR-A_char_Hyphen-Minus.svg.png");
                }
                else {
                    $(".close-step1 img").attr("src", "http://upload.wikimedia.org/wikipedia/commons/3/30/OCR-A_char_Plus_Sign.svg");
                    $('.plusStep1').bind('click',plustep1);
                }

            });
        });
        function plustep1() {
            $('#plus').empty();
            $('#step1').css('display','block');
            $(".close-step1 img").attr("src", "http://4.bp.blogspot.com/_0AyNA9sRlIs/TAPH55KDj7I/AAAAAAAAIsU/_fjn6O2WguQ/s1600/424px-OCR-A_char_Hyphen-Minus.svg.png");

        }


        });
于 2012-08-27T07:36:22.767 回答
0

您还可以使用以下

 $('.plusStep1').live('click',function() {

//---------Your Code----------
})

or 
 $('.plusStep1').bind('click',function() {
//---------Your Code----------
})
于 2012-08-27T07:37:02.627 回答
0

我认为你让这变得比它需要的更难。也许以这种方式尝试它会对你有用。

html

<a href="#" class="trigger">img</a>

<div id="togglable" style="display:none;">
  <a href="#" class="trigger">Hide me</a>
  content content content
</div>

js

$(".trigger").click(function() {
  $("#togglable").toggle();
});

然后您可以添加一些逻辑来更改触发元素的 src 属性以合并您的 + 和 - 图像。

好处是不需要实时绑定。

于 2012-08-27T07:38:49.037 回答