Question

我对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的正常事情不是我需要的东西，而是通过点击它来改变图片，这是我不需要的。

有没有人知道怎么做/如果可能的话？

Answer 1

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

Answer 2

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

试试这个： Bootstrap Carousel

Answer 3

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

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>

通过单击主页

3 个答案: