更改img单击img上的img src

VikramK 发表于 Dev

维克拉姆

我正在用angularjs创建一个座位预订系统。座位以矩阵形式显示。而且要求是每当我选择一个空座位时，img src都应该更改为所选的座位。

在Angularjs中学习时，我不确定如何实现这一目标。我显示座位布局的HTML是动态生成的。我正在使用指令在运行时嵌入HTML。还可以使用伪指令来处理图像单击时的图像src更改。

创造了这个plnkr： - http://plnkr.co/edit/EemPUIKglSz6j1zQss4i?p=preview

我的HTML

 <body>
    <h1>Compile dynamic HTML</h1>
    <div ng-controller="MyController">
      <textarea ng-model="html"></textarea>
      <div dynamic="html"></div>

    </div>
  </body>

我的控制器

var app = angular.module('app', []);

app.directive('dynamic', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function(html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
});

app.directive('change-on-click', function () {
    return {
        restrict: 'A',
        link: function($scope, element,attrs){
          element.bind('click', function(){
                attrs.$set('src', 'C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_sleeper_selected.jpg');
          })
        }
    }
});

function MyController($scope,$sce) {
  $scope.click = function(arg) {
    alert('Clicked ' + arg);
  }
  var str = ["<table frame='box'><tbody>"
, "<tr>"
, "<td><img id=1 title='Avaliable' change-on-click src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img id=4 title='Avaliable' change-on-click src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img id=8 title='Avaliable' change-on-click src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img id=12 title='Avaliable' change-on-click src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img id=16 title='Avaliable' change-on-click src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img id=20 title='Avaliable' change-on-click src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img id=24 title='Avaliable' change-on-click src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img id=28 title='Avaliable' change-on-click src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img id=32 title='Avaliable' change-on-click src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img id=36 title='Avaliable' change-on-click src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img id=40 title='Avaliable' change-on-click src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img id=44 title='Avaliable' change-on-click src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "</tr>"
, "<tr>"
, "<td><img title='Avaliable' change-on-click id=2 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=5 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=9 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=13 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=17 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=21 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=25 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=29 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=33 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=37 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=41 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=45 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "</tr>"
, "<tr>"
, "<td><img title='Not a seat' src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/no_seat.jpg'/></td>"
, "<td><img title='Not a seat' src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/no_seat.jpg'/></td>"
, "<td><img title='Not a seat' src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/no_seat.jpg'/></td>"
, "<td><img title='Not a seat' src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/no_seat.jpg'/></td>"
, "<td><img title='Not a seat' src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/no_seat.jpg'/></td>"
, "<td><img title='Not a seat' src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/no_seat.jpg'/></td>"
, "<td><img title='Not a seat' src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/no_seat.jpg'/></td>"
, "<td><img title='Not a seat' src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/no_seat.jpg'/></td>"
, "<td><img title='Not a seat' src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/no_seat.jpg'/></td>"
, "<td><img title='Not a seat' src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/no_seat.jpg'/></td>"
, "<td><img title='Not a seat' src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/no_seat.jpg'/></td>"
, "<td><img title='Not a seat' id=46 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "</tr>"
, "<tr>"
, "<td><img title='Avaliable' change-on-click id=3 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=6 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=10 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=14 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=18 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=22 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=26 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=30 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=34 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=38 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=42 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=47 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "</tr>"
, "<tr>"
, "<td><img id=Mobile src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_unavailable.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=7 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=11 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=15 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=19 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=23 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=27 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=31 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=35 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=39 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=43 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "<td><img title='Avaliable' change-on-click id=48 src='C:/Users/vk0044682/Desktop/dynamic/dynamic/assets/images/ac_semi_sleeper_vacant.jpg'></img></td>"
, "</tr>"

, "</tbody></table>"];
  $scope.html = $sce.trustAsHtml(str.join(''));

 }

像素位

您的属性在HTML中必须为蛇形，但在指令定义中为驼峰式：

app.directive('changeOnClick', function () {

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-18

我来说两句

0条评论

登录后参与评论

来自分类Dev

使用javascript单击更改img src

来自分类Dev

单击 jquery 时更改 img src

来自分类Dev

jQuery-单击更改img src，如果单击不同的img或块，则返回旧的src

来自分类Dev

更改img src单击侦听器以更改第二个img src

来自分类Dev

JavaScript自动更改img src

来自分类Dev

根据类更改img src

来自分类Dev

通过单击按钮更改javascript中的img src

来自分类Dev

通过单击 li item CSS 更改 img src

来自分类Dev

如何更改通过单击功能添加的 img src？

来自分类Dev

在IE上分离img的src

来自分类Dev

悬停在父级上时更改img src

来自分类Dev

如何从单击的img中获取src值

来自分类Dev

当我知道 <img> id 时如何更改 <img> 的 src？

来自分类Dev

更改img onclick的href和src

来自分类Dev

jQuery如何更改img src路径onclick？

来自分类Dev

img src更改时触发事件

来自分类Dev

无法使用JavaScript更改img元素的src

来自分类Dev

从父锚href更改img src

来自分类Dev

更改通过appendTo创建的img src

来自分类Dev

用输入文件更改img标签的src

来自分类Dev

如何使用JavaScript更改img src？

来自分类Dev

不循环浏览img .src，更改“点击”

来自分类Dev

根据img src更改后台JQuery

来自分类Dev

img src更改时触发事件

来自分类Dev

更改src img指令或过滤角度

来自分类Dev

Javascript更改img src不起作用

来自分类Dev

从父锚href更改img src

来自分类Dev

Javascript在加载时更改img src

来自分类Dev

在 JQuery 中动态更改 img src 属性

Related 相关文章

文章