试图有一个jQuery，JavaScript，点击功能，将图像更改为相关的ID

-1

我有一个垂直分割的页面，中间。一方面，我有一个餐馆列表，我想在何时/如果点击餐厅的名称，餐馆的图像和描述出现在分隔页面的另一侧的div内。试图有一个jQuery，JavaScript，点击功能，将图像更改为相关的ID

我想用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>

来源

2017-01-30 Tyler Gotto

有与此代码这么多错误的... 1.让你的整个容器可点击，而不是只列表项。 2.不要将类用作业务逻辑的“悬停”。 3.你的三行onClick函数确实有效：'$（'。pictureofeats'）。attr（'id'，$（this）.attr（id））;'你可能更想选择'img'元素并更改它的'src'。 –

也请向我们展示'.pictureofeats' HTML以及如何尝试更改图像。 –

嗨，非常感谢你看这个，并给了我一些见解，@HubertGrzeskowiak ..我想要的是一个餐厅的foreach名称本质上是它自己的可点击事件，当一个点击它改变图像在div = pictureofeats。 –

存放在为餐厅名数据-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'); 
})

来源

2017-01-30 12:22:31

谢谢你的回答，我现在在页面上工作，非常感谢。 –

尝试这样的事：

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

       });

我想，这是什么逻辑

来源

2017-01-30 12:20:09

试图有一个jQuery，JavaScript，点击功能，将图像更改为相关的ID

回答

相关问题