Question

有谁知道这些脚本的问题几乎就是我想要做的就是当你点击它时删除了一个输入。这是一个类型图像输入，所以你不能使用CSS，所以我尝试使用java，它似乎没有工作

HTML

<!doctype html>
<link rel="stylesheet" href="styles.css">
<title>Site Maintenance</title>
<body>
<article>
<div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="a.js"></script>

<img src="logo.png" alt="logo">
<div id="button1"><a href="#button1" id="w"><input class="do-hide" onclick="window.open('http://www.website.com/page')" type="image"     src="button.png" /></div>
<div id="1button2"><a href="#button2" id="b"><input class="do-hide" type="image" id="button2" src="button1.png" /></a></div>
<div id="1button3"><a href="#button3" id="c"><input class="do-hide" type="image" id="button3" src="button3.png" /></a></div>
<div id="1button4"><a href="#button4" id="d"><input class="do-hide" type="image" id="button4" src="button5.png" /></a></div>
<div id="1button5"><a href="#button5" id="e"><input class="do-hide" type="image" id="button5" src="button4.png" /></a></div>
</div> 
</article>
</body>

JS

$('body').on('click','a.do-hide',function(event) { 
      event.preventDefault(); 
      var href = $(this).attr('href');
      $(href).hide();
});

CSS

a { display:block; }

input.hideable{
display:block;
border:1px solid #AAA;
}

.hideable:target {
display:none;
}

body { text-align: center; padding: 150px; background-image: url("b.png"); }
body { font: 20px Helvetica, sans-serif; color: #666a73; }
article { display: block; text-align: left; width: 650px; margin: 0 auto; }
#button1 {
height: 50px;
width: 250px;
position: absolute;
left: 300px;
top: 500px;
opacity: 0.6;
}
#button1:hover {
width: 270px;
height: 60px;
}
#w:target {
display: none;
}
#button2 {
height: 50px;
width: 250px;
position: absolute;
left: 600px;
top: 500px;
opacity: 0.6;
}
#button2:hover {
width: 270px;
height: 60px;
}
#b:target {
width: 0px;
height: 0px;
}

#button3 {
height: 50px;
width: 250px;
position: absolute;
left: 900px;
top: 500px;
opacity: 0.6;
}
#button3:hover {
width: 270px;
height: 60px;
}
#c:target {
width: 0px;
height: 0px;
}

#button4 {
height: 50px;
width: 250px;
position: absolute;
left: 1200px;
top: 500px;
opacity: 0.6;
}
#button4:hover {
width: 270px;
height: 60px;
}
#d:target {
width: 0px;
height: 0px;
}

#button5 {
height: 50px;
width: 250px;
position: absolute;
left: 1500px;
top: 500px;
opacity: 0.6;
}
#button5:hover {
width: 270px;
height: 60px;
}
#e:target {
width: 0px;
height: 0px;
}

img {
position: absolute; 
left: 520px;
top: 100px;
opacity: 0.9;
}

Answer 1

您的选择器不正确。 a.do-hide会查找<a>类do-hide的{{1}}元素。相反，您需要找到.do-hide作为<a>的子，因此您需要在选择器之间留出空格。然后，您可以使用$(this).hide()隐藏元素。试试这个：

$('body').on('click', 'a .do-hide', function(event) {
  event.preventDefault();
  $(this).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<img src="logo.png" alt="logo">
<div id="button1">
  <a href="#button1" id="w">
    <input class="do-hide" onclick="window.open('http://www.website.com/page')" type="image" src="button.png" />
</div>
<div id="1button2">
  <a href="#button2" id="b">
    <input class="do-hide" type="image" id="button2" src="button1.png" />
  </a>
</div>
<div id="1button3">
  <a href="#button3" id="c">
    <input class="do-hide" type="image" id="button3" src="button3.png" />
  </a>
</div>
<div id="1button4">
  <a href="#button4" id="d">
    <input class="do-hide" type="image" id="button4" src="button5.png" />
  </a>
</div>
<div id="1button5">
  <a href="#button5" id="e">
    <input class="do-hide" type="image" id="button5" src="button4.png" />
  </a>
</div>
</div>

Answer 2

要隐藏输入，您可以添加此

$(".do-hide").click(function(){
    $(this).hide();
});

jquery删除输入类型图像

2 个答案: