-1

2 つの異なるボタンがある Web サイトを作成しています。

jQuery を使用して、2 つの要素を非表示および表示したいと考えています。どちらの要素もテキストです。たとえば、 をクリックすると表示されbuttonA、表示されていたtextA場合textBは非表示になります。同様に をクリックするbuttonBと表示され、表示されていたtextB場合textAは非表示になります。最初は両方のテキストを非表示にする必要がありますが、その位置にロードされます。

両方のテキストは、レイアウト上で同じ位置にあります。テキストのすべてのスタイルを維持するクラス (.content はその名前) を定義しました。今私が直面している問題は、クラスの両方に 2 つの div があるが、テキストに 2 つの異なる ID を与えることができないということです。

.content {
  visibility:hidden;
  border-style: none;
  display: block;
  position: fixed;
  text-align: centre;
  z-index: 1;
  margin-top: 40%;
  margin-left: 25%;
  margin-right: 25%;
  background-color: transparent;
  font-size:2.5em;
}

問題は、両方のテキストにもいくつかの一意の ID を割り当てる方法です。

<div class="content">TextA goes here<br></div>
<div class="content">TextB goes here<br></div>

だから私がjqueryを使うとき

$("#ButtonA").click(function(){
  $("#TextA").show();$("#TextB").hide();
});

$("#ButtonB").click(function(){
  $("#TextB").show();$("#TextA").hide();
});

くだらない質問かもしれませんが、自分ではわからなかったので質問させていただきました。

4

4 に答える 4

7

IDを追加する必要はありません。jQueryで取得するだけです-

$("#ButtonA").click(function(){
    $('.content').eq(0).show();
    $('.content').eq(1).hide();
});

$("#ButtonB").click(function(){
    $('.content').eq(1).show();
    $('.content').eq(0).hide();    
});
于 2012-12-18T16:01:30.737 に答える
0 
$("#ButtonA").click(function(){
    $('.content').eq(0).show();
    $('.content').eq(1).hide();
});

$("#ButtonB").click(function(){
    $('.content').eq(1).show();
    $('.content').eq(0).hide();    
});​

-- また変更 --

.content {
    border-style: none;
    display: block;
    position: fixed;
    text-align: centre;
    z-index: 1;
    margin-top: 40%;
    margin-left: 25%;
    margin-right: 25%;
    background-color: transparent;
    font-size:2.5em;
    /* visibility: hidden; CHANGE THIS TO */
    display: none;
}​​

jsFiddle: http://jsfiddle.net/gEs66/1/

于 2012-12-18T16:08:09.843 に答える
-1

質問を完全に理解しているかどうかはわかりませんが、次のようなアプローチを取ります。

http://jsfiddle.net/HdhKQ/

HTML

<div class="row">
    <div class="content">TextA goes here</div>
    <div class="button">TextA Button</div>
</div>

<div class="row">
    <div class="content" style="display:none">TextB goes here</div>
    <div class="button">TextB Button</div>
</div>

CSS

.button { cursor:pointer; }

.content {
border-style: none;
display: block;
position: fixed;
text-align: centre;
z-index: 1;
margin-top: 40%;
margin-left: 25%;
margin-right: 25%;
background-color: transparent;
font-size:2.5em;
}​

JS $(".button").click(関数(){

// Hide all content element
$(".content").hide();

// Show the content for the related button
$(this).parent().children('.content').show();

}); </p>

于 2012-12-18T16:06:17.483 に答える
-3

要素に異なる ID を使用できない理由を説明できますか?

<div class="content" id="TextA">TextA goes here<br></div>
<div class="content" id="TextB">TextB goes here<br></div>
于 2012-12-18T16:00:16.707 に答える