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

【问题标题】：Adding elements to a state changing button Html将元素添加到状态更改按钮 Html
【发布时间】：2016-04-06 16:58:59
【问题描述】：

/* 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");

});
});

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

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

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

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

【问题讨论】：

标签： php html css button element

【解决方案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 可以获得按钮的数量，然后，例如，将Recipes 保存在数组中并使用button_nr 打印它。

【讨论】：

【解决方案2】：

我不会使用空的。相反，在您的按钮类中有两个 DIV，并使用 onclick 和 blur 事件根据按钮的活动状态切换它们的可见性。由于您使用的是 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：

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

.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();
    });
});

【讨论】：

哇，非常感谢。这是我用来显示和隐藏我从数据库 onclick 中提取的信息的完美方法。非常感谢。