Javascript - URLにフラグメントがある場合に関数を呼び出す

Question

私はさまざまな雑誌を持つカルーセルを持っています。カルーセルの各雑誌をクリックすると、そのページをスクロールして詳細を表示するセクションに移動しますクリックされた雑誌。私は雑誌の細部を渡し、渡された値に従って要素を作成します。

$(function() { 
    $('.js-magazine-selector').click(function(){ 
    var img = $(this), 
     id = img.data('id'), 
     name = img.data('name'), 
     summary = img.data('summary'), 
     magazineImage = img.data('magazine-image'), 
     issueImage = img.data('issue-image'), 
     page = img.data('page'); 

    $('#back').addClass('not-allowed'); 
    $('#forward').removeClass('not-allowed'); 

    showMagazineDetail(id, name, summary, magazineImage, issueImage, page); 

    }); 
}); 

そして、これは、雑誌の詳細セクションを作成する関数です：

 @foreach($issues as $issue) 
      <div class="swiper-slide magazine-image"> 
      <div 
       class="slider-image-wrap js-magazine-selector" 
       data-id='{{ $issue->first()->magazine->id }}' 
       data-name='{{ $issue->first()->magazine->name }}' 
       data-summary='{{ $issue->first()->magazine->summary ?: '' }}' 
       data-magazine-image='{{ $issue->first()->magazine->image ?: '' }}' 
       data-issue-image='{{ $issue->first()->image }}' 
      > 
       <img src="/imagecache/medium/{{ $issue->first()->image }}"> 
       <div class="magazine-overlay"> 
       <div> 
        <p>{{ $issue->first()->magazine->name }}</p> 
        <a href="#">Se magasinet</a> 
       </div> 
       </div> 
      </div> 
      </div> 
     @endforeach 

だから、その後、クリック時に、私は雑誌の詳細セクションを作成する関数を呼び出す関数を呼び出す： これはhtmlです。正常に動作しますが、私は機能を追加する必要が

var showMagazineDetail = function showMagazineDetail(id, name, summary, issueImage, magazineImage, page){ 
    images = []; 
    nextImage = 0; 
    imagesIndex = 0; 
    loadedImages = []; 
    scrollPoint = document.height; 

    window.location.hash = name; 
    $(".magazine-section").css('visibility', 'visible'); 

    $('#name').text(name); 
    $('#summary').text(summary); 
    $('#cover-image').attr({"src" : '/imagecache/cover/' + magazineImage, "alt" : name}); 

    if (issueImage != '') { 
     $('#issueImage').show(); 
     $('#issueImage').attr({"src" : '/imagecache/medium/' + issueImage, "alt" : name}); 
    }else { 
     $('#issueImage').hide(); 
     $('#issueImage').attr({"src" : '', "alt" : name}); 
    } 

    // $('body').css('overflow-y', 'scroll'); 

    $('html,body').animate({ 
     scrollTop: $(".magazine-detail").offset().top - 80 
    }); 

    $.getJSON("issue/images", 
     { id: id }, 
     function(result){ 
      if (result.length < 2){ 
       $('.magazine-preview-nav').hide(); 
      } else { 
       $('.magazine-preview-nav').show(); 
      } 
      $.each(result, function(i, value){ 
       images.push(value); 
      }); 
      preload(); 
    }); 
}; 

ユーザーはそれが呼び出す、雑誌名のハッシュフラグメント付きURLを渡すときカルーセルの雑誌をクリックしたときと同じ機能です。私はちょうどマガジンの詳細セクションを作成するために必要な他のパラメータを渡す方法を知らないので、私は同じ名前のカルーセルの要素を見つけるためにページの読み込みにハッシュフラグメントがある場合に関数を作成することを考えていましたハッシュフラグメントの1つとして、その上でクリック機能を実行するが、それを行う方法がわからない場合は、それを行うための最善の方法は？

Answer 1

あなたは、機能準備の上、このような何かをハッシュを取得し、要素を選択し、あなたが言ったように関数を呼び出すことができます。

$(document).ready(function() { 
    var name = window.location.hash.substr(1); 

    if (name != '') { 
    var selectedMagazine = $('[data-name="' + name + '"]'), 
     id = selectedMagazine.data('id'), 
     name = selectedMagazine.data('name'), 
     summary = selectedMagazine.data('summary'), 
     magazineImage = selectedMagazine.data('magazine-image'), 
     issueImage = selectedMagazine.data('issue-image'), 
     page = selectedMagazine.data('page'); 

    showMagazineDetail(id, slug, name, summary, magazineImage, issueImage, page); 
    } 
}); 

確かにないことのいずれかのより効率的な方法があればしかし、これはあなたが尋ねたことのために仕事をするでしょう。