Question

我的代码适用于slideToggle功能，但更多/更少的图像不会交换。在浏览器中本地预览时，图像仍为“更多”。上传的版本行为略有不同。在Safari中它交换为空白图像，在FF中它使用替代文本。

我查看了档案并发现了类似的讨论，但由于我的代码工作正常，除了这个小漏洞，我希望不必使用不同的方法，因为我是jQuery的新手。这一定非常简单。我认为第二张图像的名称不正确，但这不是问题。

这是一个链接http://mentalwarddesign.net/Andrea/Leather/leather.html

这是脚本本身：

<script src="../js-jquery/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(e) {
   $('.changeTextButton').click( function() {
       $('.moreText').slideToggle(500)
       if ( $(this).attr('src') == 'img/more-button.png' ) {
                $(this).attr('src','img/less-button.png')
       }
       else {
           $(this).attr('src','img/more-button.png')
       }
   })
});
</script>

以下是具体的CSS：

.contentTop {
    width: 540px;
    padding-left: 10px;
    margin-bottom: 20px;
}
.firstText {
    width: 540px;
    padding-left: 10px;
}
.moreText  {
    width: 540px;
    padding-left: 10px;
    display: none;
}
.changeTextButton  {
    display: block;
    cursor: pointer;
    float: right;
    margin-right: 10px;
    margin-top: -18px;
}

这是相关的html：

    <div class="content">
    <div class="firstText">
        <h1><img src="imgLeather/leatherSm.jpg" width="280" height="190" alt="leather" style="float:right;margin:5px 0 0 10px;">Leather Scents</h1>
        <p>After working for several years with different tanneries, Andrea Aromatics has developed what many in our industry acknowledge to be the best leather scents on the market today.  Due to newer tanning methods, some leathers produced today no longer have the desired “traditional” scent.  Another problem is that protective coatings used on some leathers actually impede the natural leather aroma from migrating through the surface.  These polymeric coatings make the leather smell more like plastic.</p>
        <p>Our leather scents have been used by tanneries to increase and enhance the aroma of their quality leathers, as well as by manufacturers of synthetic leather products to make their product simulate the real thing.  We offer leather scents in a variety of forms: liquid, powdered, and pelletized.</p>
      <!-- end .firstText--></div>
    <div class="moreText">
        <p>Natural leather hides can be deodorized and their aroma enhanced by several application methods:</p>
        <ol>
          <li>A water dispersible version of our leather scent can be incorporated into the final bath water to impart scent to the entire hide.</li>
          <li>A concentrated oil soluble version can be mixed into the finishing oil and applied along with it.</li>
          <li>A version can be diluted with alcohol and sprayed onto the “reverse” side.</li>
        </ol>
        <p>We do not recommend mixing the leather scents with proactive leather coatings since they may react and cause discoloration.  A slight yellowing may develop which would be objectionable in “white” or “pale blue” finished leather.  Darker colors and shades are usually not affected.</p>
        <p>We have been supplying our leather scents to the industry for over twenty years.  In that time our scents have been used in both natural and artificial leathers used by several major manufacturers both domestically and abroad.  They have also been used in scented advertising, consumer leather goods, furniture upholstery, toys and sporting goods.</p>
     </div><!-- end .moreText -->
       <img src="../imgGlobal/more-button.png" width="51" height="16" class="changeTextButton" alt="textButton">
      </div><!-- end .content -->

非常感谢任何帮助我指出罪魁祸首的帮助！

Answer 1

../ imgGlobal /更button.png

是图片网址，但您使用的是：img / more-button.png

也许这是图像的错误路径。

Answer 2

就我所知，你的代码是完美的。

您的问题是，您可能很高兴听到，只是您的服务器上没有图像。

img/less-button.png

上传文件或将其更改为JS中的正确路径

$(this).attr('src','WHEREAMI__img/less-button.png')

jQuery slideToggle图像交换无法正常工作

2 个答案: