Javascript jquery按钮滑动切换隐藏内容和图像切换

我已经浏览了与我有类似问题的其他人以前的帖子，并设法达到了某个我满意的程度，唯一的问题是我无法根据隐藏内容的打开状态来替换我的图像

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

可以看到处于当前状态的页面

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 -->

---

不太擅长jqueryno-java，但是非常愿意学习我在哪里出错来纠正这个错误。提前感谢各位。

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

});

---

为什么不使用data属性来存储div的状态呢？你在这方面帮了大忙，我需要更好地掌握全局变量和局部变量，以及java的语法。在使用find函数时，当我点击一个按钮，然后点击下一个按钮时，图像似乎与前一个状态相同。我已经更新了页面以显示我的意思。这是因为所有隐藏元素都被切换，但只有s。您也只能切换单击的hiddentext:$a.toggleswitch.Sides.hiddentext。是否可以重置所有图像：如果$img.attr'src'==plusImg{$img.attr'src'，minsimg；}否则{$a.toggleswitch img.attr'src'，plusImg；}

$("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); 
   }

});