jquery onclick развернуть div и изменить текст внутри span

Question

jquery onclick развернуть div и изменить текст внутри span

0

У меня проблема с моим скриптом, где я нажимаю H3, который он будет разворачивать, и меняет только первый текст в промежутке, независимо от того, нажму ли я второй H3. После того, как я хочу свернуть его, он не изменится на исходный текст. Что я должен использовать? TQ

   <script type="text/javascript">
    jQuery(document).ready(function() {
      jQuery(".pad").hide();

      //toggle the componenet with class msg_body
      jQuery(".heading").click(function()
      {
        jQuery(this).next(".pad").slideToggle(500);
        jQuery('#span1).html('&#8743;')
      });
    });
    </script>

<h3 class="heading">text1<span id="span1" style="float:right;">&#8744;</span></h3>
<div id="occ" class="pad">
content
</div>
<h3 class="heading">Text2<span id="span1" style="float:right;">&#8744;</span></h3>

<div id="tech" class="pad">
content
</div>

user2982110 31 дек. 2013, в 16:38

Источник

2

У вас есть опечатка (отсутствует закрытие ' ) в jQuery('#span1).html('∧')
j08691 31 дек. 2013, в 14:51
0

Вы забыли закрыть ' в jQuery('span)
Dhaval Marthak 31 дек. 2013, в 14:51
0

У вас есть ошибка типа и дубликат ID.
VenomVendor 31 дек. 2013, в 15:08

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

css

4 ответа

0

Я сделал версию JsFiddle для вас, чтобы посмотреть здесь: http://jsfiddle.net/gUTTK/

jQuery(document).ready(function() {
    jQuery(".pad").hide();

    //toggle the componenet with class msg_body
    jQuery(".heading").click(function() {
        jQuery(this).next(".pad").slideToggle(500);

        if (jQuery(this).find('.span1').is(':visible')){
            jQuery(this).find('.span1').hide();
            jQuery(this).find('.span2').show();
        } else {
            jQuery(this).find('.span2').hide();
            jQuery(this).find('.span1').show();       
        }
    });
});

HTML-код

<h3 class="heading">text1
    <span class="span1" style="float: right;">&#8744;</span>
    <span class="span2" style="float: right; display: none;">&#8743;</span>
</h3>
<div class="pad">content</div>

<h3 class="heading">text1
    <span class="span1" style="float: right;">&#8744;</span>
    <span class="span2" style="float: right; display: none;">&#8743;</span>
</h3>
<div class="pad">content</div>

kchang4 31 дек. 2013, в 13:52

0

Поскольку вы выбираете # span1, он будет возвращать только первый экземпляр этого в вашем документе каждый раз. Идентификаторы должны быть уникальными. Попробуйте это вместо этого:

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery(".pad").hide();

  //toggle the componenet with class msg_body
  jQuery(".heading").click(function()
  {
    jQuery(this).next(".pad").slideToggle(500);
    jQuery(this).find("span").html('&#8743;')
  });
});
</script>

<h3 class="heading">text1<span id="span1" style="float:right;">&#8744;</span></h3>
<div id="occ" class="pad">
content
</div>
<h3 class="heading">Text2<span id="span2" style="float:right;">&#8744;</span></h3>

<div id="tech" class="pad">
content
</div>

Чтобы переключить стрелки назад, попробуйте проверить видимость элемента .pad:

http://jsfiddle.net/tjnicolaides/W6nBG/

jQuery(document).ready(function () {
    jQuery(".pad").hide();

    //toggle the componenet with class msg_body
    jQuery(".heading").click(function () {
        var $pad = $(this).next(".pad");
        var $arrow = $(this).find("span");
        if ($pad.is(':visible')) {
            $arrow.html('&#8744;');
        } else {
            $arrow.html('&#8743;');
        }
        $pad.slideToggle(500);
    });
});

TJ Nicolaides 31 дек. 2013, в 12:49

0

Удалите дублирование Id замедления :)
A1rPun 31 дек. 2013, в 14:54
0

Хорошо, я изменил свой промежуток в классе, но с тем же именем. Итак, теперь, как мне восстановить текст по умолчанию после того, как я нажму, чтобы свернуть его?
user2982110 31 дек. 2013, в 14:56
0

@TJ: вы говорите: «Идентификаторы должны быть уникальными», но ваш код не показывает это !!
Majid Golshadi 31 дек. 2013, в 14:56

Показать ещё 1 комментарий

0

Вы можете попробовать это

$(document).ready(function() {
    $(".pad").hide();
    //toggle the componenet with class msg_body
    $(".heading").click(function()
        $heading = $(this); 
        $(this).next(".pad").slideToggle(500,function() {
            var sign = $(this).is(':visible') ? '&#8743;' : '&#8744;';
            $heading.find('span').html(sign)
        });
    });
});

Manish Jangir 31 дек. 2013, в 12:35

Ещё вопросы

У вас есть опечатка (отсутствует закрытие ' ) в jQuery('#span1).html('∧')
У вас есть ошибка типа и дубликат ID.
Удалите дублирование Id замедления :)
Хорошо, я изменил свой промежуток в классе, но с тем же именем. Итак, теперь, как мне восстановить текст по умолчанию после того, как я нажму, чтобы свернуть его?
@TJ: вы говорите: «Идентификаторы должны быть уникальными», но ваш код не показывает это !!

Hive7 · Accepted Answer · 2013-12-31T13-20-00.000Z

Вам нужно настроить функцию переключения для стрелок. Поскольку это не может быть сделано с помощью html-кодов, вам нужно использовать идентификаторы, чтобы вы могли нацеливать их именно здесь: jquery вам нужно:

$(document).ready(function () {
    $('.pad').hide();
    $('.heading').click(function () {
        $(this).next('.pad').slideToggle();
        if($(this).find('.span1').attr('id') == 'yes') {
            $(this).find('.span1').attr('id', '').html('&#8744;');
        } else {
            $(this).find('.span1').attr('id', 'yes').html('&#8743;');
        }
    });
});

Скриншот Демо:

http://jsfiddle.net/Hive7/5xueU/2/

Спасибо, хотя я уже заметил ошибку при проверке