Question

当我点击HTML页面上的图片时，我想做2个动作。这两个动作是：

更改触发器（它是一个特定的操作，点击后它可以正常工作）
更改图片。

这是我的HTML代码的一部分：

2.feature

这是我的javascript代码的部分：

1.feature

考虑到我有很多照片，每张照片需要一个功能吗？

其他问题，例如，我在我的picture1上点击一次;我屏幕上的图片是<div class="col c1-11"> <p><a onclick="return toggle(this);" data-on="/trigger/2" data-off="/trigger/3" href="/trigger/3"><img src="images/mur1/V_1_OFF.png" /></a></p> </div> <div class="col c1-11"> <p><a onclick="return toggle1(this)" data-on="/trigger/4" data-off="/trigger/5" href="/trigger/5"><img src="images/mur1/V_2_OFF.png"></a></p> </div>，没问题。

但是如果我离开我的页面并且我再次来到这个页面，它会重新加载，默认情况下，图片是function toggle(element) { var onLink = element.getAttribute('data-on'); var offLink = element.getAttribute('data-off'); if (element.getAttribute("href") == offLink){ element.setAttribute("href", onLink); //It works element.getElementsByTagName('img')[0].src = "images/mur1/V_1_ON.png"; } else if (element.getAttribute("href") == onLink){ element.setAttribute("href", offLink); //It works element.getElementsByTagName('img')[0].src = "images/mur1/V_1_OFF.png"; } return false; } function toggle1(element) { var onLink = element.getAttribute('data-on'); var offLink = element.getAttribute('data-off'); if (element.getAttribute("href") == offLink){ element.setAttribute("href", onLink); //It works element.getElementsByTagName('img')[0].src = "images/mur1/V_2_ON.png"; } else if (element.getAttribute("href") == onLink){ element.setAttribute("href", offLink); //It works element.getElementsByTagName('img')[0].src = "images/mur1/V_2_OFF.png"; } return false; }，就像在我的html代码中一样。如何在屏幕上保留"images/mur1/V_1_ON.png"？显然，即使我更改了html页面，我也必须保存<img src="images/mur1/V_1_OFF.png" />的状态。你知道我该怎么办？

Answer 1

那是因为你没有选择img。您实际上是在尝试更改元素上img的属性。

你会想要这样的东西，虽然我还没有测试过它：

element.getElementsByTagName('img').setAttribute("src", "images/mur1/V_1_ON.png");

<强>更新

首先，您的img没有结束标记。其次，您的点击事件没有返回任何内容，也就是说您没有停止href的默认行为

您需要将html更改为：

<div class="col c1-11">
    <p><a id="btn1" onclick="return toggle(this);" data-on="/trigger/2" data-off="/trigger/3" href="/trigger/3"><img src="images/mur1/V_1_OFF.png" /></a></p>
    </div>
<div class="col c1-11">
    <p><a id="btn1" onclick="return toggle(this);" data-on="/trigger/4" data-off="/trigger/5" href="/trigger/5"><img src="images/mur1/V_2_OFF.png" /></a></p>
    </div>

你的js：

function toggle(element)
{
  var onLink = element.getAttribute('data-on');
  var offLink = element.getAttribute('data-off');

  if (element.getAttribute("href") == offLink){
    element.setAttribute("href", onLink);  //It works
    element.getElementsByTagName('img')[0].src = "images/mur1/V_1_OFF.png";
  } else if (element.getAttribute("href") == onLink){
    element.setAttribute("href", offLink);  //It works
    element.getElementsByTagName('img')[0].src = "images/mur1/V_1_ON.png";
  }
    return false;
}

我有kaf的建议getElementsByTagName返回一个数组，因此使用[0]选择第一个返回的元素。在这种情况下，img，如果您添加了任何新元素，则需要更新[0]或编写更好的函数来检测img中的href。 / p>

我已经返回false并使href将函数返回到click事件。因此，它不会遵循原始的return false;目标。如果您希望按照href

中的网址，请移除ListObject行

这是项目工作的一个小提琴： https://jsfiddle.net/ogzpozxt/

Answer 2

试试这个（注意：你的html中有两个具有相同id（btn1）的元素）：

element.getElementsByTagName('img')[0].src = "images/mur1/V_1_OFF.png";

您的代码就像

function toggle(element)
{
  var onLink = element.getAttribute('data-on');
  var offLink = element.getAttribute('data-off');

  if (element.getAttribute("href") == offLink){

    element.setAttribute("href", onLink);  //It works

    //Get the image into a variable and then set src attribute
    var img = element.getElementsByTagName('img')[0];
    img.src = "images/mur1/V_1_OFF.png"; 

  } else if (element.getAttribute("href") == onLink){

    element.setAttribute("href", offLink);  //It works

    //Same as above in a single line
    element.getElementsByTagName('img')[0].src = "images/mur1/V_1_ON.png";

  }
}

当更改html页面时存在变量的单击/保存状态时的许多操作

2 个答案: