jQuery условное переключение (НЕ ФОРМА) - PullRequest
Новая
       1

jQuery условное переключение (НЕ ФОРМА)

0 голосов
/ 24 января 2020

Я пытаюсь создать список переключателей, который изменяется на основе предыдущих вариантов. Я использую атрибут данных, чтобы показать, какой список должен отображаться на основе атрибута данных, но, несмотря на то, что атрибут данных изменяется на правильный, он отображает неправильный список.

Список 1: первый btn "выберите один" ищет соответствующее значение в атрибуте. 

data-popout-trigger="query-list-main"  

data-popout-container="query-list-main"

List2: вторая кнопка «выбрать два» атрибута данных обновляется на основе первого выбора. напр. 

data-popout-trigger="query-list-2"

Теперь, если я go вернусь и поменяю свой первый выбор, моя вторая кнопка получит новый атрибут данных, но все равно покажет предыдущий выбор.

HTML

<div class="query">
            <p>I am<span class="query__option jsPopoutTrigger" data-popout-trigger="query-list-main" data-query-link-out> PICK ONE </span> looking for</p>  <br>


            <div class="query__option-list jsPopoutTarget" data-popout-container="query-list-main">
                <span class="query__option " data-query-link="query-list-1"> an individual </span>  <br>
                <span class="query__option " data-query-link="query-list-2"> an entrepreneur </span>
            </div>


            <p>advice on<span class="query__option jsPopoutTrigger" data-popout-trigger data-query-list-update> PICK TWO</span></p> 

                <div class="query__option-list jsPopoutTarget" data-popout-container="query-list-1">
                    <span class="query__option"> Option 1a </span>  <br>
                    <span class="query__option"> Option 1b </span>
                </div>

                <div class="query__option-list jsPopoutTarget" data-popout-container="query-list-2">
                    <span class="query__option"> Option 2a </span>  <br>
                    <span class="query__option"> Option 2b </span>
                </div> 
        </div>

jQ 

var toggleList = function() {
var popoutTrigger = $('.jsPopoutTrigger');
var closePopoutTrigger = $('.jsClosePopoutTrigger');
var ourClass = "popout-is-active";

var body = $("body,html");

popoutTrigger.on("click", function(e) {
    e.preventDefault();
    // Get the data attribute of the popout triggger object
    var popoutId = $(this).data("popout-trigger");

    // Find the corresponding popout target
    var popoutTarget = $('.jsPopoutTarget[data-popout-container=' + popoutId + ']');

    body.toggleClass("popout-is-active");

    $(this).toggleClass(ourClass);
    popoutTarget.toggleClass(ourClass);


});

// First list options
var selectList= $('[data-query-link]');
// When I click a first list option
selectList.each(function() {
    $(this).on("click", function(e) {

        // Prevent default behaviour
        e.preventDefault();
        // Get the text from the selected item
        var getLinkText = $(this).text();
        // Update the text in the first select to match selection
        $('[data-query-link-out]').text(getLinkText); 

        // Find out what list item we are trying to open
        $listItemSelected = $(this).data('query-link'); 

        // reset attr on 2nd button


        // Add this attribute to 2nd button so that we know which list to open
        $('[data-query-list-update]').attr("data-popout-trigger", $listItemSelected );


        // close window on link click
        $('[data-popout-container]').removeClass("popout-is-active");
        // Open the selected list


    });
});



closePopoutTrigger.on("click", function(e) {
    e.preventDefault();
    // Get the data attribute of the popout triggger object
    var $popoutId = $(this).data("popout-trigger");
    // Find the corresponding popout target
    var popoutTarget = $('.jsPopoutTarget[data-popout-container=' + $popoutId + ']');

    body.removeClass("popout-is-active");

    $(this).toggleClass(ourClass);
    popoutTarget.toggleClass(ourClass);
})};

Почему это происходит, любой совет?

Вот код CodePen для моего кода.

...