0

divとして複数のセクションがあり、それぞれにid（id ="section-'。$section。'"）の末尾に番号が追加されています。これらの多くが存在する可能性があり、IDは毎回増加します。

正しいid="resource-'。$section。'"を表示および非表示にするjqueryスクリプトを作成しようとしています。ユーザーがセクションdiv内のimgをクリックすると、適切なリソースdivを非表示にし、他のすべてを非表示にします。

<div id="section-'.$section.'">
<img src="" id="section-img-'.$section.'"/>
</div>

<div id="resource-'.$section.'"></div>

<script type="text/javascript">
jQuery(document).ready(function() {
      jQuery("#resource").hide();
      jQuery("#section img").click(function()
           {
              jQuery(this).next("#resource").show();
           });
});
</script>

任意のアイデアや助けをいただければ幸いです。前もって感謝します。

変形：

<div class="section" id="section-'.$section.'">
    <img src="" class="section-img" id="section-img-'.$section.'"/>
        </div>


    <div class="resource" id="resource-'.$section.'"></div>

jsfiddle.net/kqQDH/1

4

5 に答える 5

2

更新しました

jQuery(document).ready(function() {
    jQuery('.resource').hide();
    jQuery('.section-img').click(function() {
        jQuery('.resource').hide(); //hide others

        //parse id for index
        var idx = jQuery(this).attr("id").split('-')[2];
        jQuery('#resource-'+idx).show(); //show this
    });
});​

Aclassはではありませんid。これらは2つの完全に異なるhtml属性です。クラスは一意である必要はありません。実際、jQueryクラスセレクターは一意でないことに依存しています。

<div id="section-1" class="section" >
<img src="" id="section-img-1" class="section-img" />
</div>

<div id="resource-1" class="resource"></div>

<script type="text/javascript">
jQuery(document).ready(function() {
      jQuery('div[id^="resource"]').hide();
      jQuery('div[id^="section-img"]').click(function()
           {
              jQuery(this).parent().next('div[id^="resource"]').show();
           });
});
</script>​​​​​​

（何らかの理由で）クラス名の以前の構造が必要であると判断した場合は、クラスセレクターを使用できなくなります。属性starts-withselectorを使用する必要があります。

要素IDと、それがどのような要素であるかを示すクラスを割り当てた方がよいでしょう。たとえば、最初のセクションはです<div id="section-1" class="section"></div>。次に、単純なクラスセレクターを使用してすべてsectionのを一度に選択するか、そのIDを使用して特定の何かを実行できます。

于 2012-07-11T09:56:00.433 に答える
1

次のシナリオに従うことをお勧めします。すべてのセクションをdiv＃sectionsに配置し、リソースをdiv＃resourcesに配置して、クリックした画像の親のインデックスを取得し、このインデックスを持つリソースを表示します。

コードは次のようになります。

<div id="sections">
   <div class="section">
      <img src="" class="section-img"/>
   </div>
   ...
</div>

<div id="resources">
   <div class="resource"></div>
   ....
</div>

<script>
   $(document).ready(function(){  $('.section-img').click(function(){ var index = $(this).parent().index();  $('.resource').hide().filter(':eq('+index+')').show()  })  })
</script>
于 2012-07-11T10:01:20.357 に答える
1

1）正確にそれらのクラスを持つ要素がないため、現在のセレクター.resourceとセレクターは失敗します-あなたが言うように、クラスは、たとえば、だけではありません。.section.section-4.section

2）next()コマンドはタグのコンテキストから実行されているため失敗しますimgが、実際には.resourceDIVは親.sectionDIVの兄弟です。

クラス名を一般的なものに調和させ、本当に一意のIDが必要な場合は、そのためのid属性を使用します。したがって、HTML：

<!-- classes generalised; add in unique IDs as required -->
<div class="section">
    <img src="" class="section-img" />
</div>
<div class="resource"></div>

そこでは、クラス名は一貫しており、一意ではありません。これにより、JSパーツがはるかに簡単になります。

jQuery(".resource").hide();
jQuery(".section img").click(function() {
    jQuery(this).parent().next(".resource").show(); //<-- note, parent()
});
于 2012-07-11T10:01:56.580 に答える
1

画像がクリックされるたびに、クラスからその番号を解析してから、リソースクラスで正しいdivを見つける必要があります。

jQuery(".section img").click(function()
 {
     //1.Hide all resources
     jQuery('div[class^="resource"]').hide();

     //2. parse number of resource to show   
     var number = parseInt($(this).attr('class').match(/(\d+)$/)[0], 10);
     var resourceClass = ".resource-" + number; 

     //3.find resource class and show it
     jQuery(resourceClass).show();
 });

私はそれをテストしなかったので、いくつかのタイピングエラーがあるかもしれません、しかし私があなたの意味を理解するならば、これはあなたが望む方向です。

于 2012-07-11T10:07:37.497 に答える
1

まず、クラス名が番号によって異なる場合は、それをdivのIDに割り当てる必要があります。それを前提として、ここに解決策があります：

    $('img[id^="section-"]').click (function (e) {
  var temp_section = $(this).attr('id').replace('section-','');
      $('#resource-'+temp_section).show();
      $('div[id^="resource-"]').css("display","none");
    });
于 2012-07-11T10:04:52.697 に答える