Question

我已经和其他有类似问题的人一起浏览了以前的帖子，并且设法达到我满意的某个点，唯一的问题是我不能让我的图像被替换取决于开放状态隐藏的内容。

我有多个案例研究，每个案例都有隐藏内容，当您点击任何按钮时，它会滑动为该特定案例研究打开的隐藏内容，并关闭任何其他打开的内容。

可以看到当前状态的页面here。

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 client’s 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没有java，但非常愿意学习我错误的地方来纠正它。先谢谢你们。

Answer 1

您没有选择范围内的图像，因此您获得了所有图像，也没有使用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); 
   }

});

jquery按钮幻灯片切换隐藏的内容和图像切换

1 个答案: