通过单击主页更改导航页面中的 img src答案

【问题标题】：Changing img src in a nav page by clicking on home page通过单击主页更改导航页面中的 img src
【发布时间】：2015-05-21 16:42:50
【问题描述】：

我对 JS、jQuery 和其他所有东西都很陌生。

我有一个应用导航栏，顶部有一张图片，当我点击主页上的图片/链接时需要更改该图片。

需要更改的导航 HTML

       <img class="campus" src="img/Dansaertrond.png">
       <h4>Stuvo <span class="light">EhB</br>
       Campus</span></h4>

要更改图片来源的主页的 HTML

      <div class="campus">
        <a href="#">
        <img class="photo" src="img/Dansaert.png">
        </a>
        <a href="#">
        <img class="photo2 " src="img/kaai.png">
        </a>
        <a href="#">
        <img class="photo" src="img/ttk.png">
        </a>
        <a href="#">
        <img class="photo2 " src="img/RITS.png">
        </a>
        <a href="#">
        <img class="photo" src="img/KCB.png">
        </a>
        <a href="#">
        <img class="photo2 " src="img/jette.png">
        </a>
      </div>

为了快速解释 - 如果您启动应用程序，您会看到所有图片的主页，单击其中一张，然后该图片会出现在导航屏幕中，如果您再次更改它，也是如此。

你发现改变img src的正常东西不是我需要的东西，因为大部分只是通过点击来改变图片，我不需要。

如果可能的话，有谁知道如何做到这一点？

【问题讨论】：

你需要提供最小的例子。
在 jsfiddle.net 上发布一个示例
Set image src to another image jquery 的可能重复项
@AndrejsCainikovs，我不想弹出另一个 div，我已经拥有了一切，只是导航栏中的图像应该在单击主页中的图像时发生变化

标签： javascript jquery html css image

【解决方案1】：

首先，如果您包含一些关于您的挑战的更好信息，可能会更容易回答，也许是一些代码 sn-ps。这会回答你的问题吗？

Changing the image source using jQuery

否则，

我认为你所拥有的可以由三个元素来建模。您单击主页元素之一，它会更改导航栏元素上的图像源。

$('#red').click(function() {
  $('#nav-img').attr("src","red.png").removeClass('green').addClass('red');
});
                  
$('#green').click(function() {
  $('#nav-img').attr("src","green.png").removeClass('red').addClass('green');
});

#red, .red {
  background-color: red;
  height: 20px;
  width: 20px;
}

#green, .green {
  background-color: green;
  height: 20px;
  width: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="nav-bar">
  <img src="red.png" id="nav-img" class="red">
</div>
<div class="home-content">
  <img src="red.png" id="red">
  <img src="green.png" id="green">
</div>

【讨论】：

谢谢你，这真的帮助了我！ :)

【解决方案2】：

您可以将图像播放为轮播，而不是点击后获取图像。

试试这个： Bootstrap Carousel

【讨论】：

【解决方案3】：

$(document).ready(function() {
  $('div.campus img').on('click', function() {
    var newSrc = $(this).attr('src');
    $('img.campus').attr('src', newSrc);
  });                       
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="campus">
  <img src="http://www.adweek.com/socialtimes/files/2012/03/The-Reply-Girl.jpg" />
  <img src="http://3.bp.blogspot.com/-e3s1wReW3d4/TgYzS8hG1CI/AAAAAAAAABM/NzRYQFTWWbM/s200/kim-kardashian-troy-jensen-nice.jpg" />
  <img src="http://slodive.com/wp-content/uploads/2012/10/gossip-girl-hairstyles/gossipgirlhairstyles200.jpg" />
</div>
<hr />
<img class="campus" src="http://lorempixel.com/200/200" />

确保您希望点击触发器的图像具有 .trigger 类，并且您要更改 src 的图像具有 .target 类。或者用您当前使用的类名替换这些类。

$('img.trigger').on('click', function() {
    var newSrc = $(this).attr('src');
    $('img.target').attr('src', newSrc);
};

编辑：我将根据您的代码调整解决方案：

$('div.campus img').on('click', function() {
    var newSrc = $(this).attr('src');
    $('img.campus').attr('src', newSrc);
};

您可能希望在页面加载后初始化事件处理程序。在 jQuery 中实现这一点的常用方法是使用 $(document).ready():

$(document).ready(function() {
    $('div.campus img').on('click', function() {
        var newSrc = $(this).attr('src');
        $('img.campus').attr('src', newSrc);
    };
});

完整的工作示例：http://codepen.io/anon/pen/oXzZBB

【讨论】：