Question

可以将JQuery attr绑定到像这样的js变量吗？

var pathToImg = "assets/images/picture1.png"
$("#background-image").attr("href", pathToImg)

我希望当我根据状态更改pathToImg时，元素#background-image会动态更改。

它是否在引擎盖下工作？虽然我不使用它。我想知道如何做到这一点？

Answer 1

据我所知，不，它不会那样。您需要在变量值更改时捕获事件并再次设置属性的值。

Answer 2

不，它不会那样工作。使用一些前端框架，如Angular或React，它们具有 state （显然不是完整/有效代码，Angular中的示例）：

...
var this.$scope.pathToImg = "assets/images/picture1.png";
...

this.$scope.pathToImg = "assets/images/picture2.png";

<div><img src="{{pathToImg}}"/></div>

在jQuery中，您可以使用一些函数来动态动态：

＆＃13;

var currentIndex = 1;
var baseUrl = 'http://via.placeholder.com/350x150?text=';

function plus() {
  currentIndex++;
  update();
}

function minus() {
  currentIndex--;
  update();
}

function update() {
  currentIndex = Math.max(1, currentIndex);
  $('#myImg').attr('src', baseUrl+currentIndex);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://via.placeholder.com/350x150?text=1" id="myImg"/>
<hr/>
<button onClick="minus()">-</button>
<button onClick="plus()">+</button>

＆＃13;

Answer 3

您可以在js变量和观察者方法写入更改行为代码上实现观察者： -

Object.defineProperty(this, 'pathToImg', { //watcher on js variable
    get: function () { return this._pathToImg; },
    set: function (v) {
        this._pathToImg = v;
        $("#background-image").attr("src", v); //change behaviour code
    }
});

是否可以绑定到JQuery attr到js变量？

3 个答案: