Question

我有一些divs，在单击时必须显示其他特定的divs（具有相对内容）并隐藏所有其他内容。我认为这是一个非常简单的请求，但这让我头疼。

这是我的代码，希望有人可以帮助我

$('.finiture-wrapper').on('click', function() {
        var idBtn = $(this).data('id');
        //console.log(idBtn);     
        if(idBtn == $('allestimento-img-wrapper').data('id')){
        $('allestimento-img-wrapper').css('display', 'flex')
        }
        else{
        $('allestimento-img-wrapper').css('display', 'none')
        }
        
    })

.allestimento-img-wrapper{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="finiture-wrapper" data-id="silver-bagno-1">bagno 1</button>
<button class="finiture-wrapper" data-id="silver-bagno-2">bagno 2</button>
<button class="finiture-wrapper" data-id="silver-bagno-3">bagno 3</button>

<div class="allestimento-img-wrapper"  data-id="silver-bagno-1">content 1</div>
<div class="allestimento-img-wrapper" data-id="silver-bagno-2">content 2</div>
<div class="allestimento-img-wrapper" data-id="silver-bagno-3">content 3</div>

我已经使用data-id连接了两个divs，但是我无法正确显示它。另外，我正在尝试使用if / else语句，但是也许有一种更聪明的方法。

谢谢。 P.s.我是jquery的新手，这个问题似乎很愚蠢。

Answer 1

您应该首先设置所有其他div，然后从btn id中打开所选的div，您的html应该是这样

<button class="finiture-wrapper" data-id="silver-bagno-1">bagno 1</button>
<button class="finiture-wrapper" data-id="silver-bagno-2">bagno 2</button>
<button class="finiture-wrapper" data-id="silver-bagno-3">bagno 3</button>

<div class="allestimento-img-wrapper"  id="div_silver-bagno-1">content 
1</div>
<div class="allestimento-img-wrapper" id="div_silver-bagno-2">content 
2</div>
<div class="allestimento-img-wrapper" id="div_silver-bagno-3">content 
3</div>

您的JavaScript站位是这样

$('.finiture-wrapper').on('click', function() {
    //first hide all other div
    $(".allestimento-img-wrapper").hide();
    var idBtn = $(this).data('id');
    //now open the selected div
    $("#div_"+idBtn).css('display', 'flex');
})

Answer 2

$('.finiture-wrapper').on('click', function() {
        var idBtn = $(this).data('id');

        if(idBtn === $('allestimento-img-wrapper').data('id')){
         $('.allestimento-img-wrapper').css('display', 'flex')
         $('.allestimento-img-wrapper').data('id');
        }
        if(if(idBtn !== $('allestimento-img-wrapper').data('id')){
         $('.allestimento-img-wrapper').css('display', 'none');
        }
       })

我认为U忘记了jQuery中的（。）点。希望它能解决问题。

Answer 3

您可以通过jquery显示和隐藏功能简单地显示和隐藏div。

检查下面的代码可能会对您有所帮助。

$('allestimento-img-wrapper').show(); //To show the div.
$('allestimento-img-wrapper').hide(); //To hide the div.

Answer 4

我使用了data-id选择器来获取div的相应数据ID，希望能解决您的问题，谢谢

$('.finiture-wrapper').on('click', function() {
$(this).siblings('div[data-id="'+$(this).attr('data-id')+'"]').removeClass('allestimento-img-wrapper').siblings('div').addClass('allestimento-img-wrapper') 
})

.allestimento-img-wrapper{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="finiture-wrapper" data-id="silver-bagno-1">bagno 1</button>
<button class="finiture-wrapper" data-id="silver-bagno-2">bagno 2</button>
<button class="finiture-wrapper" data-id="silver-bagno-3">bagno 3</button>
<button class="finiture-wrapper" data-id="silver-bagno-4">bagno 4</button>
 
<div class="allestimento-img-wrapper"  data-id="silver-bagno-1">content 1</div>
<div class="allestimento-img-wrapper" data-id="silver-bagno-2">content 2</div>
<div class="allestimento-img-wrapper" data-id="silver-bagno-3">content 3</div>
<div class="allestimento-img-wrapper" data-id="silver-bagno-4">content 4</div>

Answer 5

我已编辑代码，请检查。

<button class="finiture-wrapper" data-id="silver-bagno-1">bagno 1</button>
<button class="finiture-wrapper" data-id="silver-bagno-2">bagno 2</button>
<button class="finiture-wrapper" data-id="silver-bagno-3">bagno 3</button>

<div class="silver-bagno-1 commonclass"  >content 1</div>
<div class="silver-bagno-1 commonclass" >content 2</div>
<div class="silver-bagno-1 commonclass" >content 3</div>

<script>
$(".finiture-wrapper").click(function(){
var getbtnid=$(this).data("id");
$(".commonclass").hide();
$("."+getbtnid).show();
};

</script>

Answer 6

只需更改您的jQuery，而无If else条件

$('.finiture-wrapper').on('click', function() {
    var idBtn = $(this).data('id');
    $('.allestimento-img-wrapper').css('display', 'none')
    $('div[data-id*=' +  idBtn + ']').css('display', 'flex');        
});

.allestimento-img-wrapper{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="finiture-wrapper" data-id="silver-bagno-1">bagno 1</button>
<button class="finiture-wrapper" data-id="silver-bagno-2">bagno 2</button>
<button class="finiture-wrapper" data-id="silver-bagno-3">bagno 3</button>

<div class="allestimento-img-wrapper"  data-id="silver-bagno-1">content 1</div>
<div class="allestimento-img-wrapper" data-id="silver-bagno-2">content 2</div>
<div class="allestimento-img-wrapper" data-id="silver-bagno-3">content 3</div>

使用jQuery单击相应按钮后动态隐藏/显示div

6 个答案: