调用时将.attr添加到不工作的按钮

不确定问题的格式是否正确。已经手动添加了"下一个数据"，它在适当的时候发生了变化，但仍然没有变化。已将其缩小到"showNext"功能。

我的目标是根据用户输入的汽车数量来迭代有关汽车的问题。一开始我在想一个循环，但这似乎是一个更干净的方法。我是新来的，所以我可能会离开。

我的问题是，虽然它确实迭代了正确的次数，并且chrome显示它按照我的意愿选择了该按钮作为"this"变量，但出于某种原因，它没有添加属性。那行代码启动了，我没有收到任何错误，但什么也没发生。

我尝试过使用按钮的确切id，将"this"定义为变量（即：var el=id of button），以及其他一些我现在记不清的事情。什么都没用。此外，我在其他领域也使用过同样类型的命令，效果很好。

代码的其余部分运行良好，它确实循环了正确的次数，但不会添加attr。如有任何帮助，我们将不胜感激。如果我遗漏了什么，请告诉我。谢谢

这是JS:

$(document).ready(function () {
 // hide all 'hideFirst' elements, except the first one:
$('.hideFirst:not(:first)').hide();
// Method used to show/hide elements :
function showNext(el) {
    // check if element has a 'data-next' attribute:
    if (el.data('next')) {
        // hide all elements with 'hideFirst' class:
        $('.hideFirst').hide();
        // show 'Back' button:
        $('#backButton').show();
        // show the element which id has been stored in 'data-next' attribute:
        $(el.data('next')).show();
        // push the parent element ('.hideFirst') into path array:
        path.push(el.closest('.hideFirst'));
    }
}
    //Logs the number of cars in the household
$("#carAmount").click(function () {
    numberOfCars = parseInt(document.getElementById("vehicleAmount").value);
    showNext($(this));
});
//allow user to chose the type of car they drive
$("#carType").change(function () {
    carChoice = $("#carType").val();
    $("#carType").attr("data-next", "#" + carChoice);
    showNext($(this));
});
//Decides whether the user has more cars to ask about
    $(".carBtn").click(function () {
        carCount++;
        //asks about other cars
        if (carCount < numberOfCars) {
            $(this).attr('data-next', '#vehicleType');
            $('#carType').prop('selectedIndex', 0);
        }
            //moves on to the next category
        else {
            $(this).attr('data-next', '#transportation');
        }
        showNext($(this));
    });
});

这是HTML:

<div>
<form>
                <div class="hideFirst" id="vehicleCount">
                <label for="vehicleAmount">How many vehicles are there in your household?</label>
                <input type="text" id="vehicleAmount" />
                <button type="button" id="carAmount" data-next="#vehicleType" class="my-btn btnFoot"><i class="icon-footprint-right-d"></i></button>
            </div>
            <div class="hideFirst" id="vehicleType">
                <label for="carType">What kind of car do you drive?</label>
                <select id="carType">
                    <option disabled selected>--Choose One--</option>
                    <option value="gas">Gasoline</option>
                    <option value="diesel">Diesel</option>
                    <option value="cng">Natural gas</option>
                    <option value="hybrid">Hybrid</option>
                    <option value="elec">Electric</option>
                    <option value="hydrogen">Fuel Cell/Hydrogen</option>
                </select>
            </div>
            <div class="hideFirst" id="gas">
                <label for="fuelType">What type of fuel do you normally use??</label>
                <select id="gasType">
                    <option disabled selected>--Choose One--</option>
                    <option value="e10">e10 (regular unleaded)</option>
                    <option value="e85">e85</option>
                </select>
            </div>
            <div class="hideFirst" id="diesel">
                <label for="carType">What type of diesel fuel do you normally use?</label>
                <select id="dieselType" name="heatSource">
                    <option disabled selected>--Choose One--</option>
                    <option value="num5">Regular Diesel</option>
                    <option value="b10">B10 Biodiesel</option>
                    <option value="b100">B100 Biodiesel</option>
                </select>
            </div>
            <div class="hideFirst" id="cng">
                <label for="carCng">How much natural gas do you put in your car every month?</label>
                <input type="text" id="carCng" />
                <button type="button" id="propaneBill" class="carBtn btnFoot"><i class="icon-footprint-right-d"></i></button>
            </div>
            <div class="hideFirst" id="hybrid">
                <label for="carType">What kind of car do you drive?</label>
                <select id="carType" name="heatSource">
                    <option disabled selected>--Choose One--</option>
                    <option value="gas">Gasoline</option>
                    <option value="diesel">Diesel</option>
                    <option value="cng">Natural gas</option>
                    <option value="hybrid">Hybrid</option>
                    <option value="elec">Electric</option>
                    <option value="hydrogen">Fuel Cell/Hydrogen</option>
                </select>
            </div>
            <div class="hideFirst" id="elec">
                <label for="carElec">How many miles do you drive every month?</label>
                <input type="text" id="carElec" />
                <button type="button" id="elecMiles" class="carBtn btnFoot"><i class="icon-footprint-right-d"></i></button>
            </div>
            <div class="hideFirst" id="hydrogen">
                <h2>Good for you, you produce no negative Co2 emission with your vehicle!</h2>
                <button type="button" id="carsnow" class="carBtn btnFoot"><i class="icon-footprint-right-d"></i></button>
            </div>
            <div class="hideFirst" id="transportation">
                <h2>Why won't I display?</h2>
                <button type="button" data-next="" class="my-btn btnFoot"><i class="icon-footprint-right-d"></i></button>
            </div>
        </form>
        <div>
            <button id="backButton">Back</button>
        </div>
    </div>

希望在这里找到一些帮助