Question

类似于我最近提出的一个问题，但之前使用的是鼠标，所以触摸屏上有垃圾。

这是带图像的3个div。单击时，它们将单独更改为第二个图像，并将另一个图像重置为标准图像。一切正常。

但是当任何div中的第二个图像处于活动状态时，我希望能够单击此图像并导航到另一个页面。

显然将href添加到html导航并忽略JS效果。

感谢阅读。

$(document).ready(function(){
     $('#s1').click(function(){
         $('#s1').attr('src', 'images/object/click-1.png');
          $('#s2').attr('src', 'images/object/standard-2.jpg');
           $('#s3').attr('src', 'images/object/standard-3.jpg');
     });
     $('#s2').click(function(){
         $('#s1').attr('src', 'images/object/standard-1.jpg');
          $('#s2').attr('src', 'images/object/click-2.png');
           $('#s3').attr('src', 'images/object/standard-3.jpg');
     });
     $('#s3').click(function(){
          $('#s1').attr('src', 'images/object/standard-1.jpg');
           $('#s2').attr('src', 'images/object/standard-2.jpg');
            $('#s3').attr('src', 'images/object/click-3.png');
     });


});


<div id="section3" class="container-fluid" align="center">
    <div class="row row-centered ">

    <div id="top-box-1" class="col-sm-4"> 
    <img src="images/object/standard-1.jpg" class="std" id="s1" width="300" height="300"/>
    </div>


    <div id="top-box-2" class="col-sm-4">
    <img src="images/object/standard-2.jpg" class="std "id="s2" width="300" height="300"/>
    </div>


    <div id="top-box-3" class="col-sm-4">
    <img src="images/object/standard-3.jpg" class="std" id="s3" width="300" height="300"/>
    </div>

 </div>
</div>

Answer 1

由于您已经处理了点击事件，因此您可能希望在同一事件中执行此逻辑。结构上像这样的东西：

if (/* some condition */) {
    window.location.href = someUrl;
}

我想你需要定义那个条件是什么。它会基于图像的当前src吗？像这样的东西？：

if ($(this).attr('src') === 'images/object/click-1.png') {
    window.location.href = someUrl;
}

（当然，您还必须定义someUrl是什么。）

Answer 2

您可以查看src现在是否包含＆＃39;点击＆＃39;。如果没有，则交换src和return false以停止href： -

＆＃13;

$('#s1').click(function(e) {
  if (!$(this).is('[src*="click"]')) {
    $('#s1').attr('src', 'images/object/click-1.png');
    $('#s2').attr('src', 'images/object/standard-2.jpg');
    $('#s3').attr('src', 'images/object/standard-3.jpg');
    return false;
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="section3" class="container-fluid" align="center">
  <div class="row row-centered ">

    <div id="top-box-1" class="col-sm-4">
      <a href="http://stackoverflow.com/">
        <img src="images/object/standard-1.jpg" class="std" id="s1" width="300" height="300" />
      </a>
    </div>


    <div id="top-box-2" class="col-sm-4">
      <a href="http://stackoverflow.com/">
        <img src="images/object/standard-2.jpg" class="std " id="s2" width="300" height="300" />
      </a>
    </div>


    <div id="top-box-3" class="col-sm-4">
      <a href="http://stackoverflow.com/">
        <img src="images/object/standard-3.jpg" class="std" id="s3" width="300" height="300" />
      </a>
    </div>

  </div>
</div>

＆＃13;

要解决此问题：if (!$(this).is('[src*="click"]')) {

$(this).is允许您针对选择器检查this，如果是，则返回布尔值（true）。

'[src*="click"]'是一个选择器，用于确定src属性是否包含＆＃39; click＆＃39;。 *表示包含任何地方的地方。还有其他组合，例如^=，用于开头。

因此$(this).is('[src*="click"]')如果src点击了“!则表示正确。但是你需要将其反转为不包含。这是this的用途，意味着如果src（点击的元素）没有点击＆＃39;在void lineDelete(String file_name, String line_to_erase){ try { int line_number = 0; String newline = System.getProperty("line.separator"); File temp = new File("temporary.txt"); File theFile = new File(file_name+".txt"); String path = theFile.getCanonicalPath(); BufferedReader reader = new BufferedReader(new FileReader(theFile)); BufferedWriter writer = new BufferedWriter(new FileWriter(temp)); String lineToRemove = line_to_erase; String currentLine; while((currentLine = reader.readLine()) != null) { String trimmedLine = currentLine.trim(); if(trimmedLine.equals(lineToRemove)){ continue; } writer.write(currentLine + newline)); } writer.close(); reader.close(); theFile.delete(); temp.renameTo(file_name + ".txt"); } catch (FileNotFoundException e){ System.out.println(e); } catch (IOException e){ System.out.println(e); }。

添加href链接到通过js显示的图像点击

2 个答案: