状態を変更するボタンに要素を追加する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ループを使用して、名前のid =ループ番号を持つすべてのボタン。たとえば：

var button_nr = $(this).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() 
});

あなたはボタンの数を取得することができ、その後、例えば、配列内およびbutton_nr印刷、それを使用してレシピを保存します。

出典

2016-04-06 17:23:32 Oen44

私は空を使用しません。代わりに、ボタンクラス内に2つの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：なし：

私は表示のみに詳細をデフォルトに、1つのクラスを追加しました。

.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

うわー、ありがとうございました。これは、私がデータベースから取り出した情報を表示したり非表示にするために取るべき完全なアプローチです。どうもありがとうございました。 – Nathan

状態を変更するボタンに要素を追加するHtml

答えて

関連する問題