Слайд кнопки jquery для переключения скрытого содержимого и переключения изображений

Question

Слайд кнопки jquery для переключения скрытого содержимого и переключения изображений

0

Я прошел через предыдущие сообщения других с похожими проблемами, чтобы справиться с ними, и мне удалось достичь определенного момента, которым я доволен, единственная проблема заключается в том, что я не могу заставить свой образ заменяться в зависимости от открытого статуса скрытого контента.

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

Страница в текущем состоянии можно увидеть здесь.

HTML-код

<!-- BLOCK 1 -->
        <div class="serviceblock ten2 columns2">
            <div class="image">
                <img src="images/one.png" alt="1 - Personal Planning" />
            </div>
            <div class="text">
                <h4>Personal planning</h4>
                <p>We achieve a more intimate understanding of our clients than anybody else, because we provide empathy and discretion, and devote more time to personal planning than anybody else. It is at this stage that we help our clients to express, and build their vision of the future with absolute clarity.</p>
            </div><!-- END TEXT -->
            <div class="hiddenTextWrapper fourteen2 columns2">
                <a href='#' class='toggleswitch'><img src='images/switchup.png' alt='' /></a>   
                <!-- HIDDEN TEXT -->
                <div class="hiddenText">
                    <h5>The Life Audit</h5>
                    <p>The Life Audit is a comprehensive and strictly confidential discussion of a clients current circumstances, covering not just their existing banking relationships and assets, but all of the personal details that affect their wealth ambitions. These include their business interests, their family interests, the locations in which they operate, their world view and their risk appetite.</p>
                    <p>For our clients, the life audit has two main benefits: Firstly, it is so in-depth that it ensures that we, their advisors, understand them intimately enough to act as their proxy, leading to a more tailored service style and more fitting recommendations than they would experience anywhere else.</p>
                    <p>Secondly, the process of talking in a structured way about the things that matter most often helps the client to hone and refine their vision for the future, as well as to identify new goals and ambitions.</p>
                </div><!-- END HIDDEN TEXT -->
            </div><!-- END HIDDEN TEXT WRAPPER -->
        </div><!-- END SERVICEBLOCK -->

JQuery

$(document).ready(function () {

var minusImg = "images/switchup.png";
var plusImg = "images/switchdown.png";

$(".toggleswitch").on('click', function () {
    var $ans = $(this).next(".hiddenText");
    $ans.slideToggle();
    $(".hiddenText").not($ans).slideUp();

    event.preventDefault(); 
    }); 
});

$("a.toggleswitch").click(function(){

   $(".hiddenText").slideToggle();

   var plusImg = "images/switchup.png";
   var minusImg = "images/switchdown.png";        
   $this = $(".toggleswitch img");            

   if( $this.attr('src') == plusImg ) { $this.attr('src', minusImg);} 
   else { $this.attr('src', plusImg); }

   });

Не очень разбираюсь в Jquery no java, но очень хочу узнать, где я ошибся, чтобы исправить это. Спасибо заранее, ребята.

Cra5hovride 16 дек. 2013, в 17:20

Источник

0

почему вы не используете data-attribute для <div class = "hiddenText"> для хранения состояния DIV
patel.milanb 16 дек. 2013, в 15:30

Теги:

javascript

jquery

html

1 ответ

Ещё вопросы

почему вы не используете data-attribute для <div class = "hiddenText"> для хранения состояния DIV

Tosh · Accepted Answer · 2013-12-16T12-40-00.000Z

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

$("a.toggleswitch").click(function(){

   $(".hiddenText").slideToggle();

   var plusImg = "images/switchup.png";
   var minusImg = "images/switchdown.png";        
   var $img = $(this).find("img");            

   if( $img.attr('src') === plusImg ) { 
     $img.attr('src', minusImg);
   } else { 
     $img.attr('src', plusImg); 
   }

});

Фантастика, Тош, ты действительно очень помог мне, мне нужно лучше понять глобальные и локализованные переменные, а также синтаксис java.
При использовании функции поиска кажется, что когда я нажимаю одну кнопку, а затем следующую, изображение остается прежним в предыдущем состоянии. Я обновил страницу, чтобы показать, что я имею в виду.
Это потому, что все скрытые элементы переключаются, но только s. Вы также можете переключать только скрытый текст, по которому вы щелкаете: $ ("a.toggleswitch"). Siblings (". HiddenText"). Вы можете сбросить все изображения: if ($ img.attr ('src') === plusImg) {$ img.attr ('src', minusImg); } else {$ ("a.toggleswitch img"). attr ('src', plusImg); }