Question

我想在用户点击链接时更改文本，但我有一个现有的onclick jQuery函数。我打算在其上添加文本更改。它的作用是当用户点击颜色时，图像会发生变化。我也想添加图片的名称。

这是代码的格式。

<div class = "car-img-quote col-md-6" >
    <div class="img animation" data-animation ="fadeIn"><img id="image" src="vios-color/vios_AJM.jpg" alt="" ></div>
        <div class = "thumb-img-quote">
            <div class = "thumb-container">
                <div class="thumb" id = "thumb">
                    <span data-src="vios-color/vios_AJM.jpg"><a href="#?" class = "label" ><img src="../../thumb/th-Alumina-Jade.png">  </a></span>
                    <span  data-src="vios-color/vios_B.jpg"><a href="#?" class = "label"><img src="../../thumb/th-Black.png"> </a></span>
                    <span  data-src="vios-color/vios_BRM.jpg"><a href="#?" class = "label"><img src="../../thumb/th-Black-Red.png"> </a></span>
                    <span  data-src="vios-color/vios_BMM.jpg"><a href="#?"class = "label" ><img src="../../thumb/th-Blue-Metal.png"></a></span>
                    <span  data-src="vios-color/vios_FW.jpg"><a href="#?" class = "label"><img src="../../thumb/th-Freedom-White.png"> </a></span>
                    <span  data-src="vios-color/vios_OM.jpg"><a href="#?" class = "label"><img src="../../thumb/th-Orange-Metal.png"> </a></span>
                    <span  data-src="vios-color/vios_RMM.jpg"><a href="#?"class = "label" ><img src="../../thumb/th-Red-Metal.png">  </a></span>
                    <span  data-src="vios-color/vios_SM.jpg"><a href="#?" class = "label"><img src="../../thumb/th-Silver-Metal.png">  </a></span>
                    <span  data-src="vios-color/vios_WP.jpg"><a href="#?"class = "label" ><img src="../../thumb/th-White-Pearl.png"> </a></span>
                </div>
            <div class="clear"></div>
        </div>
    </div>
</div>

这是我的jQuery。我只是不知道在哪里添加它，因为我还在学习语言。

$('.thumb span').each(function(){
    var _this = $(this);
    var src = _this.data("src");
    _this.find('a').click(function(){
        $("#image").show( function() {
            $(".img img").attr("src", src);
        });
    });
});

Answer 1

您可以使用与存储和选择图像src值相同的方法。您可以在拇指元素中再添加一个数据属性，并在其中保留相应的标题。

现在，点击后你可以选择类似于选择src的文本，并使用jQuery的text方法更新它。

＆＃13;

$('.thumb span').each(function(){
  var _this = $(this);
  var src = _this.data("src");
  var text = _this.data("caption");
  _this.find('a').click(function(){
     $("#image").show( function() {
    $(".img img").attr("src", src);
    $("#caption").text(text);
     });
 });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "car-img-quote col-md-6" >
                    <div class="img animation" data-animation ="fadeIn"><img id="image" src="http://lorempixel.com/100/100/fashion" alt="" >
                    <div id="caption">Fashion</div></div>
              <div class = "thumb-img-quote">
                <div class = "thumb-container">

                    <div class="thumb" id = "thumb">


                        <span data-src="http://lorempixel.com/100/100/fashion" data-caption="Fashion"><a href="#?" class = "label" ><img src="http://lorempixel.com/100/100/fashion">  </a></span>
                        <span  data-src="http://lorempixel.com/100/100/people" data-caption="People"><a href="#?" class = "label"><img src="http://lorempixel.com/100/100/people"> </a></span>
                        <span  data-src="http://lorempixel.com/100/100/food" data-caption="Food"><a href="#?" class = "label"><img src="http://lorempixel.com/100/100/food"> </a></span>
                     </div>
                       <div class="clear"></div>
                 </div>
            </div>

            </div>

＆＃13;

Answer 2

因此，一旦点击底部的任何span标记，您就想在顶部用 id image更改图像的来源。

尝试这种简单的方法

$( '.thumb span a img' ).each(function( e ){
  e.preventDefault();
  $( "#image" ).show();
  $( "#image" ).attr( "src", $( this ).closest( "span" ).attr( "data-src" ) );
});

Answer 3

您可以像在图像源中一样在span数据属性中添加颜色名称。

<span data-src="vios-color/vios_AJM.jpg" data-title="your-color">
 <a href="#?" class = "label" >
     <img src="../../thumb/th-Alumina-Jade.png">
 </a> 
</span>

并在图片下方添加<p>。

<div class="img animation" data-animation ="fadeIn">
  <img id="image" src="vios-color/vios_AJM.jpg" alt="" > 
  <p clas="title"></p>
</div>

就像更换图片来源一样，您可以替换文字。

$("p.title").html(_this.data("title"));

使用jquery中的现有onclick按钮单击添加更改文本

3 个答案: