收藏
回答

点击更改图片src

请教:

当循环渲染了image 标签.  想点击其中的一张图片触发add方法,改变当前的图片并在图片前面加一段文字.  

按照如下代码写的话, 点击会把所有循环出来的图片都改变了.    请问要怎么写. 谢谢


<view style='background:#F2F2F2;display:flex;justify-content:space-between;' wx:for="{{xxx}}">  xxxx


<image src="{{src}}" style='height:30px;width:30px' bindtap='add'></image>


</view>


JS:

add:function(){

var that = this;

that.setData({

src:'..........'  

})

},


最后一次编辑于  2018-06-13  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

7 个回答

  • 异步加载
    异步加载
    2018-06-14

    <view wx:for="{{img}}" wx:for-index="idx" wx:for-item="itemName">

    <image src = "{{img.url}}" style = 'height:30px;width:30px' bindtap = 'add' data-idx="{{idx}}">

    </image>

    </view>


    add: function (e) {

    let idx = e.currentTarget.dataset.idx

    this.data.img[idx].url = 新的地址

    this.setData({

    img: this.data.img

    })

    }


    2018-06-14
    赞同 2
    回复
  • 一碗肉nina
    一碗肉nina
    2018-06-13

    你好,所有图片都使用的一个src吗

    2018-06-13
    赞同
    回复 7
    • Andy
      Andy
      2018-06-13

      是的.

      2018-06-13
      回复
    • 一碗肉nina
      一碗肉nina
      2018-06-13

      那你改变src当然会作用到所有的image上呀,你可以为循环的xxx每一个都设置一个src属性,这样就可以改变某一个image标签了。

      2018-06-13
      1
      回复
    • Andy
      Andy
      2018-06-13回复一碗肉nina

      <image src="{{src}}" style='height:30px;width:30px' bindtap='add' data-src="src"></image>    這樣?   然後呢,不好意思, 我不太明白.

      2018-06-13
      回复
    • 一碗肉nina
      一碗肉nina
      2018-06-13

      因为你只有一个src,相当于所有image标签是公用这个src的,一旦src发生改变,所有的组件渲染也会跟着改变。因为你是循环渲染,所以你可以给你循环的那个数组里的每一个对象添加一个src的属性,然后动态的改变对应的src值。

      2018-06-13
      1
      回复
    • Andy
      Andy
      2018-06-13回复一碗肉nina

      data: {

      a:['','',''],


      }

      <  view    wx:for  =  "{{a}}">  

          <  image     src  =  "../../xxxx"     style  =  'height:30px;width:30px'     bindtap  =  'add'></  image  >  

      </  view  >  


      假如這樣,src 不用數組, 只想找到點擊對應的那個src ,然後改變它.  js 要怎麼寫?

      2018-06-13
      回复
    查看更多(2)
  • 闻名
    闻名
    2018-06-14

    你对请求来的json数组进行操作,把图片的路径变为item.src,当你点击那个图片的时候,拿到那个元素的下标,再拿到json数组,对选中的“下标项”的src属性进行更改,最后再把它放入data中就行了

    2018-06-14
    赞同 1
    回复 1
    • Andy
      Andy
      2018-06-14

      謝謝你先, 你的方法理論上可行的,就是操作起來有點麻煩,特別是動態獲取Json數組里的數據時。

      2018-06-14
      回复
  • Yuki
    Yuki
    2018-06-13

    <view style='background:#F2F2F2;display:flex;justify-content:space-between;' wx:for="{{xxx}}">  xxxx


        <image src="{{src}}" data-index="{{index}}" style='height:30px;width:30px' bindtap='add'></image>


    </view>


    JS:

        add:function(e){

            var index = e.currentTarget.dataset.index;

            //当点击的下标为3时,再设置相应的值

            if(index == 3){

                var that = this;

                that.setData({

                      src:'..........'  

                 })

            }

        },




    2018-06-13
    赞同 1
    回复 3
    • Andy
      Andy
      2018-06-13

      小姐姐, 不行吖, 還是全部 img變成setData 里的src了.

      不只是index == 3 的那變了src

      2018-06-13
      回复
    • Yuki
      Yuki
      2018-06-13回复Andy

      改变item.src

      2018-06-13
      回复
    • Andy
      Andy
      2018-06-13回复Yuki

      能貼一下代碼怎麼寫嗎?

      data: {

      a:['','',''],

      src:''xxx"

      }

      < view wx:for = "{{a}}">  

          < image   src = "{{src}}" data-index="{{index}}"   style = 'height:30px;width:30px'   bindtap = 'add'></ image >

      </ view >

      //add方法要怎麼寫?

      2018-06-13
      回复
  • 木子吻雨叚
    木子吻雨叚
    2018-06-15

    <view style='background:#F2F2F2;display:flex;justify-content:space-between;' wx:for="{{detailList}}">{{imgIndex==index?wrod:'奥奥奥奥'}}

    <image src="{{imgIndex==index?'../../picture/my/nothing.png':item.Photo}}" style='height:30px;width:30px' bindtap='add' data-index="{{index}}"></image>

    </view>


    js:

    add:function(e){

    let index = e.currentTarget.dataset.index;

    console.log(index)

    var that=this;

    that.setData({

    wrod:'sadfsa',

    imgIndex:index

    })

    },


    2018-06-15
    赞同
    回复 2
    • Andy
      Andy
      2018-06-15

      謝謝你哦!~

      2018-06-15
      回复
    • 木子吻雨叚
      木子吻雨叚
      2018-06-15

      不客气

      2018-06-15
      回复
  • Noah's Ark
    Noah's Ark
    2018-06-15

    把你的图片路径循环添加到 数组里面,然后点击改变对应的路径

    2018-06-15
    赞同
    回复
  • 。
    2018-06-14

    < view   style = 'background:#F2F2F2;display:flex;justify-content:space-between;'   wx:for = "{{xxx}}">  xxxx

    //循环的时候,把src后面跟上当前的index值

        < image   src = "{{src_index}}" data-index="{{index}}"   style = 'height:30px;width:30px'   bindtap = 'add'></ image >


    </ view >


    JS:

        add: function (e){

            var index =  e.currentTarget.dataset.index;

            //当点击的下标为3时,再设置相应的值

             if(index == 3){

                 var  that =  this ;

                 var dataobj={};

                dataobj["src"+index]='..........';

                that.setData(dataobj)

            }

        },




    改了下一楼的代码,不知道是否可行

    2018-06-14
    赞同
    回复