Question

我从不同的帖子中获取了一些代码，这里的代码在js小提琴中起作用但在本地没有任何帮助非常感谢

我知道有一些paragrapgh而不是下面的图片，但这仅用于测试

由于

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
         <title>DY Fitness</title>
         <script src="imagesel.js" type="text/javascript"></script>
    </head>
    <body>

        <img id="imga" src="http://www.placekitten.com/100/100" />
        <img id="imgb" src="http://www.placekitten.com/100/100" />
        <img id="imgc" src="http://www.placekitten.com/100/100" />
        <div id="show" style=" visibility:hidden;">
          <p id="showa">AAA</p>
          <p id="showb">BBB</p>
          <p id="showc">CCC</p>
</div>
    </body>
</html>

JS code imagesel.js

 $(document).ready(function() {
$('#imga').click(function() {
  $('#showa').css('visibility', ($('#showa').css('visibility') == 'visible') ? 'hidden' : 'visible');
  $('#showb').css('visibility', ($('#showb').css('visibility') == 'visible') ? 'hidden' : 'hidden');
  $('#showc').css('visibility', ($('#showc').css('visibility') == 'visible') ? 'hidden' : 'hidden');
})
 $('#imgb').click(function() {
    $('#showb').css('visibility', ($('#showb').css('visibility') == 'visible') ? 'hidden' : 'visible');
    $('#showa').css('visibility', ($('#showa').css('visibility') == 'visible') ? 'hidden' : 'hidden');
    $('#showc').css('visibility', ($('#showc').css('visibility') == 'visible') ? 'hidden' : 'hidden');
 })
  $('#imgc').click(function() {
    $('#showc').css('visibility', ($('#showc').css('visibility') == 'visible') ? 'hidden' : 'visible');
    $('#showb').css('visibility', ($('#showb').css('visibility') == 'visible') ? 'hidden' : 'hidden');
    $('#showa').css('visibility', ($('#showa').css('visibility') == 'visible') ? 'hidden' : 'hidden');
    });
});

Answer 1

如评论中所述，您的问题很可能是您没有加载jquery库。但这是一种可怕的方式来做你想做的事情。它可以更简单地完成：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
         <title>DY Fitness</title>
         <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
         <script src="imagesel.js" type="text/javascript"></script>
    </head>
    <body>
        <!-- note that I added 'data-show' attributes with the id of the element to show -->
        <img id="imga" src="http://www.placekitten.com/100/100" data-show="showa" />
        <img id="imgb" src="http://www.placekitten.com/100/100" data-show="showb" />
        <img id="imgc" src="http://www.placekitten.com/100/100" data-show="showc" />
        <div id="show" style="visibility:hidden;">
          <p id="showa">AAA</p>
          <p id="showb">BBB</p>
          <p id="showc">CCC</p>
</div>
    </body>
</html>

然后你的javascript看起来像这样：

$(function(){
     $('img').click(function(){ // when an image is clicked
        var id = $(this).data('show'); // get the value of the data-show attribute
        $('#show > p').css('visibility', 'hidden'); // hide all of the p inside #show
        $('#' + id).css('visibility', 'visible'); // display the specific p
        $('#show').css('visibility', 'visible'); // show the div holding your p items.
    });
});

使用数据属性是将数据传递给点击处理程序的好方法。

Answer 2

您的代码无效，因为您缺少jQuery

添加jQuery和volia http://jsbin.com/yumiqu/edit?html,css,js,output

只需在CSS中添加一个类.invisible：

.invisible{
  visibility:hidden;
}

并将该类分配给您的子元素：

<img id="imga" src="http://www.placekitten.com/100/100" />
<img id="imgb" src="http://www.placekitten.com/100/100" />
<img id="imgc" src="http://www.placekitten.com/100/100" />
<div id="show">
  <p class="invisible" id="showa">AAA</p>
  <p class="invisible" id="showb">BBB</p>
  <p class="invisible" id="showc">CCC</p>
</div>

这就是你所需要的（包含在DOm ready ofc中）：
http://jsbin.com/yumiqu/1/edit?html,css,js,console,output

$('[id^=img]').click(function() {
  var $target = $("#show"+ this.id.split("img")[1]);    // $(#show+ a, b, c...)
  $("[id^=show]").not( $target ).addClass("invisible"); // Remove from all
  $target.toggleClass("invisible");                     // add to target el.
});

设置图像在点击时可见/隐藏在div中

2 个答案: