尝试使用 jQuery、javascript、click 函数将图像更改为相关 id答案

【问题标题】：trying to have a jQuery, javascript, click function which changes an image to the related id尝试使用 jQuery、javascript、click 函数将图像更改为相关 id
【发布时间】：2017-01-30 12:05:06
【问题描述】：

我有一个垂直分割的页面，在中间。一方面，我有一个餐厅列表，我想当/如果点击餐厅的名称时，餐厅的图像和描述会出现在分割页面另一侧的 div 内。

我正在尝试使用 jQuery 执行此操作并拥有它，因此当有点击事件时，点击的名称的 id 存储在一个变量中，然后该变量对应于一张图片，该图片随后将显示在 div 中。

我确信有更简单的方法可以做到这一点，我对此表示空白，或者如果有人可以帮助我以我尝试的方式做到这一点，我将不胜感激。欢迎所有见解，谢谢。

这对我来说是新的。我知道我可以通过遍历每个 id 并拥有自己的函数调用来做到这一点，但我试图减少重复性并拥有一个适用于所有人的函数。谢谢

JS 代码：

$('.hover').click( function(){
   var iD = $(this).attr(id);
   $('.pictureofeats').removeAttr("id");
   $('.pictureofeats').attr('id', iD);
});

HTML 代码：

<div class="row drinks brunchpic">
   <img src="pics/buffalofood.png"   width="200px"/>
   <div class="row">
      <div class="col-xs-6 lists">
         <ul>
            <li class="hover" id="coles">Coles</li>
            <br>
            <li class="hover" id="716">716 (Food and Sports)</li>
            <br>
            <li class="hover" id="bdb">Big Ditch Brewing</li>
            <br>
         </ul>
      </div>
      <div class="col-xs-6 lists">
         <ul>
            <li class="hover" id="barbill">Bar Bill</li>
            <br>
            <li class="hover" id="lloyds">Lloyds</li>
            <br>
            <li class="hover" id="abv">Allen Burger Venture</li>
            <br>
         </ul>
      </div>
   </div>
</div>
 <div class="col-xs-12 col-sm-6" id="foodInfo">
            <div class="row">
                <div class="pictureofeats" id="foodImg"></div>
            </div>
        </div>

【问题讨论】：

这段代码有很多问题... 1. 让您的整个容器可点击，而不仅仅是列表项。 2. 不要使用像“悬停”这样通用的类来进行业务逻辑。 3. 您的三行 onClick 函数确实有效：$('.pictureofeats').attr('id', $(this).attr(id)); 而您可能更愿意选择 img 元素并更改其 src。
请同时向我们展示.pictureofeats HTML 以及您尝试更改图像的方式。
嗨，非常感谢您查看此内容并给我一些见解，@HubertGrzeskowiak .. 我试图将餐厅的名称作为其自己的可点击事件，当点击事件时它会更改 div=pictureofeats 中的图像。

标签： javascript jquery css image function

【解决方案1】：

将所需的类名存储在餐厅名称的 data-id 属性中并切换图像的显示以保持绝对定位

JS Fiddle

按照以下方式构建您的 HTML：

<div class="parent">
 <div class="a">
  <div class="img1 active">
  1
  </div>
  <div class="img2">
  2
  </div>
  <div class="img3">
  3
  </div>
 </div>
 <div class="b">
  <div data-id="img1">abc</div>
  <div data-id="img2">def</div>
  <div data-id="img3">ghi</div>
 </div>

</div>

CSS：

.parent {
 width: 100%;  
}

.a,.b {
  display: inline-block;
  min-width: 48%;

}
.img1,.img2,.img3 {
  position: absolute;
  display: none;
}

.active {
  display: block;
}

JS：

$('.b div').click(function() {
 var x = $(this).data('id');
 $('.a div').removeClass('active');
 $('div.' + x).addClass('active');
})

【讨论】：

感谢您的回答，我现在可以在页面上使用它，非常感谢。

【解决方案2】：

试试这样的：

             <div id="restId" class="row drinks brunchpic"><img src="pics/buffalofood.png"  width="200px"/>
                    <div class="row">
                        <div class="col-xs-6 lists">
                            <ul>
                               <li class="hover" id="coles">Coles</li><br>
                                <li class="hover" id="716">716 (Food and Sports)</li><br>
                                <li class="hover" id="bdb">Big Ditch Brewing</li><br>
                            </ul>
                        </div>
                        <div class="col-xs-6 lists">
                            <ul>
                               <li class="hover" id="barbill">Bar Bill</li><br>
                                <li class="hover" id="lloyds">Lloyds</li><br>
                                <li class="hover" id="abv">Allen Burger Venture</li><br>
                            </ul>
                        </div>
                    </div>
                </div>

在javascript中：

$('#restId').click( function(){
                    $('#restId img').attr('src', newSource);

                });

我认为这是逻辑

【讨论】：