php - 将元素添加到状态更改按钮 Html

Question

/* css for button to change size on click */
.button:focus {
   width: 99%;
   height: 500px;
   }

//below is the script that handles the auto scroll to the button clicked on screen.
  $(document).ready(function () {
$('.button').click( function() {
    $('html,body').animate({ scrollTop: $(this).offset().top - (($(window).height()/1.5) - $(this).outerHeight(true) ) / 2  }, 2000);
    $(this).empty(); //empty title and author to prepare for recipe
        $(this).append("Recipe Instructions Below");

});
});

在我正在构建的网站上，我提取添加到数据库中的最新信息，并在可点击的按钮中显示每一行。我的目标是按钮从大约 100px x 60px 开始，单击时“聚焦”将增长到屏幕宽度。

现在，当我单击按钮时，我想清空按钮并将其替换为数据库中的更多信息，即单击的食谱说明。当我然后取消焦点或单击按钮时，我希望它返回到它只显示食谱名称和作者的原始状态。

我的看法是按钮是对象，但我认为这是非常错误的。如果可能的话，任何人都可以给我任何关于智能和更有效的方法的反馈，因为我唯一的问题是在单击时向按钮添加更多元素。如果有任何反馈，我将不胜感激。

这是一个小演示 https://jsfiddle.net/DxKoz/twj7m2sb/1/

Answer 1

这应该可以做到。

$(document).ready(function () {
    $('.button').click( function() {
    var btn = $(this);
    $('html,body').animate({
        scrollTop: $(this).offset().top - ( ($(window).height()/1.5) - $(this).outerHeight(true) ) / 2

    }, 2000,
    function() {
        btn.html("Recipe Instructions Below"); //html() so you don't have to use empty()
    });

});

如果要添加更多按钮，则使用 for 循环，用 id=loop number 命名每个按钮。例如:

for(var i=1; i<buttons.length; i++ ) {
    $('#buttons-list').append('<button id="' + i + '">' + Recipe Name + Author Name + '</button>');
}

$('button').click(function() {
    var button_nr = $(this).id;
    $('#'+button_nr).html("Recipe Instructions Bellow"); //html() so you don't have to use empty()
});

使用 var button_nr = $(this).id 你可以获得按钮的数量，然后，例如，将 Recipes 保存在数组中并使用 button_nr 打印它.