Question

我快速测试了使用.load将此content slider拉入下一个div区域。当我将带有标记的脚本完全放在外部html文件中时，它工作正常。但是，如果将脚本移动到外部js文件中，该函数将不会启动。如果我在十个html文件中有相同的滑块和不同的内容，我真的需要将脚本放在每个文件中吗？我可以将脚本放入我的主外部js文件或页面标题中，并在每次请求时重新触发吗？

选择框.load方法：

var area = $(".selectboxarea");

$('Select').on('change', function () {  
    area.empty(); 
    var $this = $(this);
    var selected = $this.find('option:selected');
    var loadfile = selected.data('file');
    var selectfirst = $('.selectempty');
    var nextarea = $this.next('.selectboxarea');
    $(".searchselectbox").not(this).prop('selectedIndex',0);
    selectfirst.text('Select');
    var hide = $this.find('.selectempty').text('Hide');$this.find('.selectempty').toggleClass('hide'); 

 if (loadfile) {    // ******LOAD FILE INTO DIV*********
    nextarea.load(loadfile); 
    hide

 }else if (selected.hasClass('hide')) {
    selected.text('Select');
    selected.toggleClass('hide');

 }else { 
    var url = $this.val();
    if (url != '') {
    window.location.href = url
 }
    return false;
 }

});

滑块代码：

$(document).ready(function() {
    var thisItem = 1,nextItem = 0, range = 0, thisHeight = 70,
    $counter = $('#item_count'), $body = $('body');    

    //for each content item, set an id, and hide.
    $('.content_item').each(function() {
        nextItem++;
        $(this).attr('id', nextItem).hide();
    });

    //range contains how many content items exist
    range = nextItem, nextItem = 2, prevItem = range;

    //display the first content item
    $('#' + thisItem).show();
    $counter.html(thisItem + ' of ' + range);

    //hide old content item, show next item, resize content container
    $('#nextButton').click(function() {
        prevItem = thisItem;
        //update counter
        $counter.html(nextItem + ' of ' + range);
        //set focus to body so button is not selected,
        $body.focus();
        //get height of next content item to resize container
        thisHeight = $('#' + nextItem).height() + 20;
        //resize content container
        $('#content_container').animate({
            height : (thisHeight + 'px')
        }, 1000, 'swing');
        //hide old content item
        $('#' + thisItem).toggle('slide', {
            direction : 'left',
            easing : 'swing'
        }, 1000);
        //show next content item
        $('#' + nextItem).toggle('slide', {
            direction : 'right',
            easing : 'swing'
        }, 1000);

        //set old content item to current item
        thisItem = nextItem;
        //loop to first item if range reached
        if (thisItem >= range) {
            nextItem = 1;prevItem=range-1;
        } else {
            nextItem++;prevItem=thisItem-1;
        }
    });
    //end next click function


    //hide current content item, resize content container, show previous item 
    $('#prevButton').click(function() {

        //If we have reached the end range, the next item will be item #1
        if(nextItem==1){//so set the current item to the last
            thisItem=range;
        }else thisItem = nextItem - 1;

        //update counter
        $counter.html(prevItem + ' of ' + range);
        //set focus to body so button is not selected,
        $body.focus();
        //get height of next content item to resize container
        thisHeight = $('#' + prevItem).height() + 20;
        //resize content container
        $('#content_container').animate({
            height : (thisHeight + 'px')
        }, 1000, 'swing');
        //hide old content item
        $('#' + thisItem).toggle('slide', {
            direction : 'right',
            easing : 'swing'
        }, 1000);
        //show next content item
        $('#' + prevItem).toggle('slide', {
            direction : 'left',
            easing : 'swing'
        }, 1000);

        //set next content item to current item
        nextItem = thisItem;

        if (prevItem >= range) {//if at end of items
            nextItem = 1;//first
            prevItem = range -1;
            thisItem = range;
        } else if(prevItem <=1){//if at start of items
            prevItem = range;
            thisItem = 1;
            nextItem = 2;
        }else {//if in the middle of items
            prevItem--;
            thisItem--;
            }

    });
    //end prev click function

});

Demo1（当脚本在每个外部html文件中时）

Demo2（当脚本在外部js文件中时不工作）

Download File

Answer 1

好吧，这仍然是一项正在进行的工作 - 但它应该让你去。你的代码存在很多问题：

1）你没有将整件事包裹在$(document).ready()

中

2）在您的旧代码中，您正在页面加载中执行此操作：

$('.content_item').each(function() {
    nextItem++;
    $(this).attr('id', nextItem).hide();
});

如果内容在原始页面上，这一切都很好 - 但是你没有。所以要解决这个问题，你需要删除那一位 - 然后改变：

nextarea.load(loadfile);

为：

nextItem = 0;
nextarea.load(loadfile, function(result) {
    $('.content_item').each(function() {
        nextItem++;
        $(this).attr('id', nextItem).hide();
        total_found++;
    });
    console.log("Total: " + total_found);
    $('#item_count').html(total_found);
    hide;
    $('#1').show();
});

然后至少获取ID和项目总数。然后你需要在脚本顶部附近添加一个新变量，然后在找到一个元素时增加它：

var total_found = 0;

这应该至少得到基础知识 - 但仍然需要做的工作（有点奇怪的脚本TBH！）

希望现在能让你走上正轨！

Answer 2

而不是：

$('#nextButton').click(function() {
  ...
});

尝试做：

$(document).on('click', '#nextButton', function() {
  ...
});

基本上，这会将事件附加到#nextButton的任何实例（当前存在于页面上，或将来 - 或者当您加载新的琐事时）。

在此处详细了解委派活动：
https://api.jquery.com/on/#direct-and-delegated-events

通过ajax使用jQuery脚本加载外部文件

2 个答案: