更改「x」變量需要更新2個功能，但只更新一個

我對編程非常陌生，我不知道在哪裏尋找這個問題。我的大腦只是沒有看到爲什麼它不起作用的問題。更改「x」變量需要更新2個功能，但只更新一個

我試圖更新'x'變量按鈕單擊以影響'gridGen'for循環函數以及'boxSize'css函數。 gridGen不會改變，我仍然以默認的16 * 16（256）框爲結束，但它們的大小應該是他們需要的。

編輯：說我在提示符下輸入「4」，我會得到我的div容器盒4列，但水平行會繼續向下的頁面仍然共有256

$(document).ready(function() { 
    var x = 16; 
    $('#button').mouseup(function() { 
     this.blur() 
    }); 
    $('#gridContainer').hover(function fill() { 
     $('.gridBox').mouseenter(function() { 
     $(this).addClass('fill'); 
     }); 
    }); 
    var gridGen = function() { 
     for (var i = 0; i < x * x; i++) { 
     var $gridBox = $('<div class="gridBox"></div>'); 
     $('#gridContainer').append($gridBox); 
     } 
    }; 
    var boxSize = function() { 
     var size = 640/x; 
     $('.gridBox').css('width', size).css('height', size); 
    }; 
    $('#button').click(function() { 
     $('.gridBox').removeClass('fill'); 
     //i need this to update x in 'gridGen' function 
     //only seems to update in 'boxSize' function 
     x = prompt('Enter Dimensions', 'square of...'); 
     boxSize(); 
     gridGen(); 
    }); 
    boxSize(); 
    gridGen(); 
});

JsFiddle

來源

2017-02-28 Josh Mergens

請張貼的jsfiddle :) –

切下的功能例如我該怎麼切下來？我不確定什麼是多餘的。 –

我得到了一個jsfiddle版本的工作和鏈接在帖子的底部。 –

在您的按鈕單擊事件，你需要改變removeClass()到remove()，這將刪除以前生成的元素。

而且點擊按鈕時，您需要在調用之前調用gridGen()boxSize()

例子：https://jsfiddle.net/gyr5djhy/3/

來源

2017-02-28 01:06:48

這似乎以最簡單的方式解決了我的問題，非常感謝！ –

你需要添加盒

之前清空容器

var gridGen = function() { 
    $('#gridContainer').empty() 
    for (var i = 0; i < (x * x); i++) { 
     var gridBox = $('<div class="gridBox"></div>'); 
     $('#gridContainer').append(gridBox); 
    } 
};

本地函數prompt()返回一個字符串，你需要解析ST響成數

p = prompt('Enter Dimensions', 'square of...'); 

n = parseInt(p, 10) 
if (!isNaN(n)) { 
    x = n 
}

沃金版https://jsfiddle.net/gyr5djhy/1/

來源

2017-02-28 00:42:07 RomanMinkin

更改「x」變量需要更新2個功能，但只更新一個

回答

相關問題