2

私は自分がやりたいことの始まりを持っていますが、私の考え方ではDRYの道を進んでいないのではないかと心配しています.

現在、以下の div のいずれかをクリックすると、以下のすべてのヘッダーの横にアイコンのチェックマークが表示または非表示になります。

特定の div をクリックして、ページの下の関連するヘッダーにアイコンのチェックマークを表示する場合にのみ必要です。

私のアプローチではどの方法を使用する必要がありますか? 私のやり方は、将来的には意味がないように見えます。ご清聴ありがとうございました。 

<div class="row container">
  <div class="row offset1">
    <div class="span3 frustrate_topside">  
      <div>
        <p>Click here to only show icon-ok element next to relevant anecdotes!</p>
      </div>
    </div>
    <div class="span3 frustrate_topside">
        <div>
          <p>Click here to only show icon-ok element next to relevant anecdotes!</p>
        </div>
    </div>
    <div class="span3 frustrate_topside">
      <div>
        <p>Click here to only show icon-ok element next to relevant anecdotes!</p>
      </div>
    </div>
  </div>
</div>

<div class="offset2 span6" id='container'>
  <h5 class="faq_header"><i class="icon-ok"></i> Hey, it would be cool if..</h5>  
  <div class='content'>trouble</div>
  <hr>
  <h5 class="faq_header"><i class="icon-ok"></i> The kick is up! And..</h5>
  <div class='content'> 80% completion rate.</div>
  <hr>
  <h5 class="faq_header"><i class="icon-ok"></i> Third anecdote</h5>
  <div class='content'>joke on me</div> 
</div>

<script>  
$('div.frustrate_topside').click(function(){
  $('i').toggle();
});
</script>
4

1 に答える 1

2

ここにあなたが求めているもののための動作するJSフィドルがあります：http://jsfiddle.net/sTve6/1/ アイコン/画像でファイルを設定していないので、「o」のプレースホルダーテキストを使用しました各アイコン、およびアイコンが最初は非表示であると仮定しました。

HTML:

<div class="row container">
  <div class="row offset1">
    <div class="span3 frustrate_topside" for='q1'>  
      <div>
        <p>Click here to only show icon-ok element next to relevant anecdotes!</p>
      </div>
    </div>
    <div class="span3 frustrate_topside" for='q2'>
        <div>
          <p>Click here to only show icon-ok element next to relevant anecdotes!</p>
        </div>
    </div>
    <div class="span3 frustrate_topside" for='q3'>
      <div>
        <p>Click here to only show icon-ok element next to relevant anecdotes!</p>
      </div>
    </div>
  </div>
</div>

<div class="offset2 span6" id='container'>
  <h5 class="faq_header"><i class="icon-ok" id="q1">o</i> Hey, it would be cool if..</h5>  
  <div class='content'>trouble</div>
  <hr>
  <h5 class="faq_header"><i class="icon-ok" id="q2">o</i> The kick is up! And..</h5>
  <div class='content'> 80% completion rate.</div>
  <hr>
  <h5 class="faq_header"><i class="icon-ok" id="q3">o</i> Third anecdote</h5>
  <div class='content'>joke on me</div> 
</div>

CSS:

.icon-ok 
{
 display:none;   
}​    ​

JS:

$('div.frustrate_topside').click(function(){
    var elt = $(this).attr('for');
    $("#" + elt).toggle();
});​
于 2012-12-31T23:57:37.767 に答える