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到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 =循环编号。例如：

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，您可以获得按钮数，然后，例如，将数据保存在数组中，并使用button_nr打印它。

Answer 2

我不会空着。相反，您的按钮类中有两个DIV，并使用 onclick 和模糊事件，根据按钮的活动状态切换其可见性。由于你正在使用jQuery，你可以使用children（）来定位按钮中的类（如果你在一个页面上有多个，它就不会触发所有这些类。）

请参阅https://jsfiddle.net/jzuegnkx/1/

HTML：

<body>
 <button class="button">
   <div class="title">
     Recipe name<br />
     By: Author
   </div>
   <div class="details">
     Recipe Details
   </div>
 </button>
</body>

CSS：

我只添加了一个类，默认显示详细信息：none。

.details {
  display: none;
}

使用Javascript：

$(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");
    $(this).children('.title').hide();
    $(this).children('.details').show();
   });
  $('.button').blur(function() {
    $(this).children('.details').hide();
    $(this).children('.title').show();
    });
});

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

2 个答案: