Добавление элементов в кнопку изменения состояния Html

/* 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 пикселей на 60 пикселей, а при нажатии «сфокусированная» будет увеличиваться до ширины экрана.Добавление элементов в кнопку изменения состояния Html

Теперь, когда я нажимаю кнопку, я хочу выпустить кнопку и заменить ее дополнительной информацией из базы данных, то есть инструкции по рецепту нажали. Когда я затем сфокусируюсь или кликнув по кнопке, я бы хотел, чтобы она вернулась в исходное состояние, где она просто отображает имя рецепта и автора.

Способ, которым я смотрю, это то, что кнопки являются объектами, но я думаю, что это очень неправильно. Если возможно, кто-нибудь может дать мне отзыв о умном и эффективном способе этого, потому что моя единственная проблема заключается в добавлении дополнительных элементов к кнопке при нажатии. Я был бы очень признателен за любые отзывы.

Вот небольшой демо https://jsfiddle.net/DxKoz/twj7m2sb/1/

источник

2016-04-06 Nathan

Это должно сделать это.

$(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 цикл, имя каждой кнопки с идентификатором = число петель. Например:

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 печати.

источник

2016-04-06 17:23:32 Oen44

Я не использовал бы пустой. Вместо этого у вас есть два DIV в классе кнопок и переключите их видимость на основе активного состояния вашей кнопки, используя onclick и размытие событий. Так как вы используете JQuery, вы можете использовать ребенок() для целевых классов внутри кнопки (в случае, если у вас есть более чем одна на странице не будет вызывать все из них.)

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

источник

2016-04-06 17:32:02 Sterling

Вау, спасибо так много. Это идеальный подход для меня, чтобы показать и скрыть информацию, которую я извлекаю из базы данных onclick. Большое спасибо. – Nathan

Добавление элементов в кнопку изменения состояния Html

ответ

Смежные вопросы