使用 jQuery 单击相应按钮后的动态 hide/show div

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');
        }
       })

我想你忘记了 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 单击相应按钮后的动态 hide/show div

Dynamic hide/show divs after click on respective buttons with jQuery

html

javascript

jquery

show-hide