javascript - ページの読み込み時にjquery関数を自動的に開始し、ユーザーの操作を維持するにはどうすればよいですか

Question

私のページで Jquery を使用する JavaScript 関数があります。ページの読み込み時にこの関数を自動的に開始するようにしたいのですが、ユーザーは引き続き関数を操作できます。これは、新しい div を非表示にしてフェードインするリンクを選択する機能です。これも自動的に行われるようにしようとしています。

$(document).ready(function() {


        $('#tablecell1').click((function () {
    var last_image = null;

    return function () {
        if (last_image) {
            $('#tablecell1 .selected').attr('src', last_image).removeClass('selected');
        }

        var $clicked_image = $('img', this);
        last_image = $clicked_image.attr('src');
        $clicked_image.attr('src', 'NewsBarAZ/Article-Nav-Bar2_01.gif').addClass('selected');
        $('#img2').attr('src','NewsBarAZ/Article-Nav-Bar1_02.gif');
        $('#img3').attr('src','NewsBarAZ/Article-Nav-Bar1_03.gif');
        $('#img4').attr('src','NewsBarAZ/Article-Nav-Bar1_04.gif');
        $('#img5').attr('src','NewsBarAZ/Article-Nav-Bar1_05.gif');

    }
})());

    $('#tablecell2').click((function () {
    var last_image = null;

    return function () {
        if (last_image) {
            $('#tablecell2 .selected').attr('src', last_image).removeClass('selected');
        }

        var $clicked_image = $('img', this);
        last_image = $clicked_image.attr('src');
        $clicked_image.attr('src', 'NewsBarAZ/Article-Nav-Bar2_02.gif').addClass('selected');
        $('#img1').attr('src','NewsBarAZ/Article-Nav-Bar1_01.gif');
        $('#img3').attr('src','NewsBarAZ/Article-Nav-Bar1_03.gif');
        $('#img4').attr('src','NewsBarAZ/Article-Nav-Bar1_04.gif');
        $('#img5').attr('src','NewsBarAZ/Article-Nav-Bar1_05.gif');

    }
})());

    $('#tablecell2').click((function () {
    var last_image = null;

    return function () {
        if (last_image) {
            $('#tablecell2 .selected').attr('src', last_image).removeClass('selected');
        }

        var $clicked_image = $('img', this);
        last_image = $clicked_image.attr('src');
        $clicked_image.attr('src', 'NewsBarAZ/Article-Nav-Bar2_02.gif').addClass('selected');
        $('#img1').attr('src','NewsBarAZ/Article-Nav-Bar1_01.gif');
        $('#img3').attr('src','NewsBarAZ/Article-Nav-Bar1_03.gif');
        $('#img4').attr('src','NewsBarAZ/Article-Nav-Bar1_04.gif');
        $('#img5').attr('src','NewsBarAZ/Article-Nav-Bar1_05.gif');

    }
})());

    $('#tablecell3').click((function () {
    var last_image = null;

    return function () {
        if (last_image) {
            $('#tablecell3 .selected').attr('src', last_image).removeClass('selected');
        }

        var $clicked_image = $('img', this);
        last_image = $clicked_image.attr('src');
        $clicked_image.attr('src', 'NewsBarAZ/Article-Nav-Bar2_03.gif').addClass('selected');
        $('#img1').attr('src','NewsBarAZ/Article-Nav-Bar1_01.gif');
        $('#img2').attr('src','NewsBarAZ/Article-Nav-Bar1_02.gif');
        $('#img4').attr('src','NewsBarAZ/Article-Nav-Bar1_04.gif');
        $('#img5').attr('src','NewsBarAZ/Article-Nav-Bar1_05.gif');

    }
})());

    $('#tablecell4').click((function () {
    var last_image = null;

    return function () {
        if (last_image) {
            $('#tablecell4 .selected').attr('src', last_image).removeClass('selected');
        }

        var $clicked_image = $('img', this);
        last_image = $clicked_image.attr('src');
        $clicked_image.attr('src', 'NewsBarAZ/Article-Nav-Bar2_04.gif').addClass('selected');
        $('#img1').attr('src','NewsBarAZ/Article-Nav-Bar1_01.gif');
        $('#img2').attr('src','NewsBarAZ/Article-Nav-Bar1_02.gif');
        $('#img3').attr('src','NewsBarAZ/Article-Nav-Bar1_03.gif');
        $('#img5').attr('src','NewsBarAZ/Article-Nav-Bar1_05.gif');

    }
})());

    $('#tablecell5').click((function () {
    var last_image = null;

    return function () {
        if (last_image) {
            $('#tablecell5 .selected').attr('src', last_image).removeClass('selected');
        }

        var $clicked_image = $('img', this);
        last_image = $clicked_image.attr('src');
        $clicked_image.attr('src', 'NewsBarAZ/Article-Nav-Bar2_05.gif').addClass('selected');
        $('#img1').attr('src','NewsBarAZ/Article-Nav-Bar1_01.gif');
        $('#img2').attr('src','NewsBarAZ/Article-Nav-Bar1_02.gif');
        $('#img3').attr('src','NewsBarAZ/Article-Nav-Bar1_03.gif');
        $('#img4').attr('src','NewsBarAZ/Article-Nav-Bar1_04.gif');

    }
})());


     $('.preview').hide();

  $('#link_1').click(function(){ 
      $('#latest_story_preview1').hide();
       $('#latest_story_preview2').hide();
      $('#latest_story_preview3').hide();
      $('#latest_story_preview4').hide();
      $('#latest_story_main').fadeIn(800);
  });   

  $('#link_2').click(function(){ 
      $('#latest_story_main').hide();
      $('#latest_story_preview2').hide();
      $('#latest_story_preview3').hide();
      $('#latest_story_preview4').hide();
      $('#latest_story_preview1').fadeIn(800);
  });

  $('#link_3').click(function(){ 
      $('#latest_story_main').hide();
      $('#latest_story_preview1').hide();
      $('#latest_story_preview3').hide();
      $('#latest_story_preview4').hide();
      $('#latest_story_preview2').fadeIn(800);
  });

    $('#link_4').click(function(){ 
      $('#latest_story_main').hide();
       $('#latest_story_preview1').hide();
      $('#latest_story_preview2').hide();
      $('#latest_story_preview4').hide();
      $('#latest_story_preview3').fadeIn(800);
  });
    $('#link_5').click(function(){ 
      $('#latest_story_main').hide();
       $('#latest_story_preview1').hide();
      $('#latest_story_preview2').hide();
      $('#latest_story_preview3').hide();
      $('#latest_story_preview4').fadeIn(800);
  });


    });

score 1 · Accepted Answer

.trigger()を使用して、コード内の任意のイベントをトリガーできます

なので

  $('#link_1').trigger('click');

score 0 · Accepted Answer

関数に名前を付けて、適切な場所で引数を付けて呼び出します。

function hideLinkFadeDiv(link, div) {
  link.hide();
  div.fadeIn();
};

$(function() { //Personal Preference Instead of $(document).ready(function() {

  hideLinkFadeDiv($('#foo'), $('#bar'));
  //Runs when the document loads

  $('#foo').on('click', function() { 
    hideLinkFadeDiv($(this), $('#bar'));
    //runs when #foo is clicked
  });
});

score 0 · Accepted Answer

提供された関数の内部動作はそのまま残しましたが、id の代わりにクラスを使用することを検討する必要があります。

// Once the DOM is ready
$(function(){
    tableClick("1", {"2", "3", "4", "5"});
    tableClick("2", {"1", "3", "4", "5"});
    tableClick("3", {"1", "2", "4", "5"});
    tableClick("4", {"1", "2", "3", "5"});
    tableClick("5", {"1", "2", "3", "4"});

    $('.preview').hide();

    linkClick("1", {"1", "2", "3", "4"});
    linkClick("2", {"0", "2", "3", "4"});
    linkClick("3", {"0", "1", "3", "4"});
    linkClick("4", {"0", "1", "2", "4"});
    linkClick("5", {"0", "1", "2", "3"});
});

// tableClick
var tableClick = function(el, order){
    $("#tablecell" + el).click(function(){
        var last_image = null;

        return function () {
            if (last_image) {
                $(this).find(".selected").attr("src", last_image).removeClass("selected");
            }

            var $clicked_image = $("img", this);
            last_image = $clicked_image.attr("src");
            $clicked_image.attr("src", "NewsBarAZ/Article-Nav-Bar2_0" + el +".gif").addClass("selected");
            for (var i = 1; i <= order.length; i++ ){
                $("#img" + order[i]).attr("src","NewsBarAZ/Article-Nav-Bar1_0" + order[i] + ".gif");
            }
        }
    });
};

// linkClick
var linkClick = function(el, hideElements){
    $("#link_" + el).click(function(){
        // hide elements
        for (var i = 0; i < hideElements.length; i++){      
            if (hideElements[i] == "0") $("#latest_story_main").hide();
            else $("#latest_story_preview" + hideElements[i]).hide();
        }

        // show active
        var active = parseInt(el) - 1;

        if (active == 0) active = "main";
        else active = "preview" + active;

        $("#latest_story_" + active).fadeIn(800);
    });
};

javascript - ページの読み込み時にjquery関数を自動的に開始し、ユーザーの操作を維持するにはどうすればよいですか

3 に答える 3

Related

Reference