Динамическое скрытие / отображение делений после нажатия на соответствующие кнопки с помощью jQuery

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, но, возможно, есть более разумный способ.

Спасибо. Постскриптум Я новичок в jquery, и этот вопрос может показаться глупым.

Answer 1

Просто поменяйте 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>

Answer 2

Я отредактировал код, пожалуйста, проверьте.

<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 3

Я использовал data-id селектор, чтобы получить соответствующий идентификатор данных div. Надеюсь, это решит вашу проблему, спасибо

$('.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 4

Вы можете просто показать и скрыть div с помощью функции jquery show and hide.

Проверьте приведенный ниже код, он может вам помочь.

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

Answer 5

$('.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 6

сначала вы должны скрыть все остальные 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');
})