Question

我有3个按钮，每个都有自己的盒子，这些盒子都是隐藏的，当我按下按钮时，我想让盒子打开，当我按下按钮时，盒子应该自动获得关闭并显示方框二。

但是我在这里按下按钮1和按钮2然后显示两个bo ..

希望你理解我的问题

我的代码如下

＆＃13;

<!--JQuery-->
    $('.btn1').click(function(){
      $('.img1').toggle()
    });

    $('.btn2').click(function(){
      $('.img2').toggle()
    });

    $('.btn3').click(function(){
      $('.img3').toggle()
    });

＆＃13;

<!--CSS-->
    .btn1, .btn2, .btn3 {
     border:4px solid;
     float:left;
     margin-right: 10px;
     margin-bottom: 20px;
     width: 100px;
     text-align:center;
    }

    .img1, .img2, .img3 {
     border:1px solid;
     float:left;
     margin-right: 10px;
     display:none;
     width: 100px;
     text-align:center;
    }
    .div {
     clear:both;
    }

＆＃13;

<!--HTML-->
    <div class="btn1">Button Image</div>
    <div class="btn2">Button Audio</div>
    <div class="btn3">Button Video</div>
    <div class="div"></div>

    <div class="img1">Image 1</div>
    <div class="img2">Image 2</div>
    <div class="img3">Image 3</div>

＆＃13;

Answer 1

利用自定义data-*属性来定位相应的元素。首先，隐藏所有，然后显示目标

$('[class^="btn"]').click(function(){
  $('[class^="img"]').hide();
  var target = $(this).attr('data-target')
  $(target).show();
});

$('.cancel').click(function(){
  $('[class^="img"]').hide();
 
});

.btn1, .btn2, .btn3, .cancel {
 border:4px solid;
 float:left;
 margin-right: 10px;
 margin-bottom: 20px;
 width: 100px;
 text-align:center;
}

.img1, .img2, .img3 {
 border:1px solid;
 float:left;
 margin-right: 10px;
 display:none;
 width: 100px;
 text-align:center;
}
.div {
 clear:both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="btn1" data-target=".img1">Button Image</div>
<div class="btn2" data-target=".img2">Button Audio</div>
<div class="btn3" data-target=".img3">Button Video</div>
<div class="cancel">Cancel</div>

<div class="img1">Image 1</div>
<div class="img2">Image 2</div>
<div class="img3">Image 3</div>

Answer 2

您可以通过按类对HTML元素进行分组并使用单个事件处理程序来简化逻辑。然后，您可以button将div与index关联起来$('.btn').click(function(){ $('.img').hide().eq($(this).index()-1).show(); });。试试这个：

.btn {
    border: 4px solid;
    float: left;
    margin: 0 10px 20px;
    width: 100px;
    text-align: center;
}
.img {
    border:1px solid;
    float: left;
    margin-right: 10px;
    display: none;
    width: 100px;
    text-align: center;
}
.div {
    clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="btn">Button Image</div>
<div class="btn">Button Audio</div>
<div class="btn">Button Video</div>
<div class="div"></div>

<div class="img">Image 1</div>
<div class="img">Image 2</div>
<div class="img">Image 3</div>

jQuery

Answer 3

＆＃13;

var showImg = function(element){
  var showElement = element.attr("data-show");
  $("." + showElement).toggle();
}

$(".btn").click(function(){
  $(".img").hide();
  showImg($(this));
});

＆＃13;

.btn1, .btn2, .btn3 {
 border:4px solid;
 float:left;
 margin-right: 10px;
 margin-bottom: 20px;
 width: 100px;
 text-align:center;
 cursor : pointer;
}

.img1, .img2, .img3 {
 border:1px solid;
 float:left;
 margin-right: 10px;
 display:none;
 width: 100px;
 text-align:center;
}
.div {
 clear:both;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn btn1" data-show="img1">Button Image</div>
<div class="btn btn2" data-show="img2">Button Audio</div>
<div class="btn btn3" data-show="img3">Button Video</div>
<div class="div"></div>

<div class="img img1">Image 1</div>
<div class="img img2">Image 2</div>
<div class="img img3">Image 3</div>

＆＃13;

这是工作代码。希望你能理解这一点。

Answer 4

使用start with selector

public function registerControllers(Loader $loader) { ...

<强> DEMO

Answer 5

您可以使用data-*属性将引用（在本例中为id）存储到其他元素。点击隐藏所有特定类，而不是仅显示单击的一个引用：

$(document).ready(function() {
  $('.btn').click(function() {
    $('.img').hide();
    $($(this).data('id')).show();
  });
});

.img {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn" data-id="#img1">Btn 1</div>
<div class="btn" data-id="#img2">Btn 2</div>
<div class="btn" data-id="#img3">Btn 3</div>

<div class="img" id="img1">Image 1</div>
<div class="img" id="img2">Image 2</div>
<div class="img" id="img3">Image 3</div>

Answer 6

[
    {
        "id": "1",
        "name": "The first post",
        "replied": "true"
    },
    {
        "id": "2",
        "name": "The second post",
        "replied": "false"
    }
]

如何一次只能看到一个div

6 个答案: