Любой способ переставить содержание в нескольких элементах отделения
Прежде всего: не используют mysql_* функции . Только не, нет оправдания. Они давно устарели (по уважительной причине). Вместо этого используйте функции mysqli_* (обратите внимание на i) или библиотеку PDO. С учетом этого, фактический ответ на ваш вопрос:
Хотя и плотное, но сообщение об ошибке точно описывает проблему:
... Call to undefined function mysql_connect() ...
Это означает, что в PHP отсутствует соответствующая общая библиотека это может определить эту функцию. Учитывая поддерживаемые в настоящее время версии PHP , я подозреваю, что вы используете PHP7 +. Это важно, потому что функции mysql_* были удалены в PHP v7.0.0 .
6 ответов
соглашаются Вы с пользованием библиотекой JavaScript как jQuery? вот быстрый пример jQuery для выполнения то, что Вы после. единственная модификация к Вашему HTML является добавлением контейнерного элемента, как предложено:
<div id="shuffle">
<div id='d1'>...</div>
<div id='d2'>...</div>
<div id='d3'>...</div>
</div>
и JavaScript:
function shuffle(e) { // pass the divs to the function
var replace = $('<div>');
var size = e.size();
while (size >= 1) {
var rand = Math.floor(Math.random() * size);
var temp = e.get(rand); // grab a random div from our set
replace.append(temp); // add the selected div to our new set
e = e.not(temp); // remove our selected div from the main set
size--;
}
$('#shuffle').html(replace.html() ); // update our container div with the
// new, randomized divs
}
shuffle( $('#shuffle div') );
Я использовал бы серверный код для выполнения этого. Я знаю, что это не действительно ответ на Ваш вопрос, но это - альтернативная реализация.
С уважением,
Frank
Я перенес бы отделения во внешнее отделение, затем передал бы его идентификатор shuffle_content ().
Там, Вы могли создать новое отделение, клонировав узлы отделения обертки в произвольном порядке для заполнения его, затем заменить отделение обертки новым отделением.
Можно захватить содержание каждого отделения
c1 = document.getElementById('div1').innerHTML
c2 = document.getElementById('div2').innerHTML
c3 = document.getElementById('div3').innerHTML
Затем определите новый порядок на них случайным образом.. и затем помещенный каждое содержание в новое место назначения
скажите, например, случайность дала:
c1_div = 'div2'
c2_div = 'div1'
c3_div = 'div3'
затем Вы просто:
document.getElementById(c1_div).innerHTML = c1
document.getElementById(c2_div).innerHTML = c2
document.getElementById(c3_div).innerHTML = c3
Для Вашего HTML короткий ответ на Ваш вопрос:
function shuffle_content() {
var divA = new Array(3);
for(var i=0; i < 3; i++) {
divA[i] = document.getElementById('d'+(i+1));
document.body.removeChild(divA[i]);
}
while (divA.length > 0)
document.body.appendChild(divA.splice(Math.floor(Math.random() * divA.length),1)[0]);
}
Для получения там, я записал следующее, которое я думаю работы лучше:
<html>
<div id="cards">
<div id="card0">Card0</div><div id="card1">Card1</div>
<div id="card2">Card2</div><div id="card3">Card3</div>
<div id="card4">Card4</div><div id="card5">Card5</div>
<div id="card6">Card6</div><div id="card7">Card7</div>
<div id="card8">Card8</div><div id="card9">Card9</div>
</div>
<button id="shuffle">Shuffle</button>
<script language="javascript">
<!--
document.getElementById('shuffle').onclick = function () {
var divCards = document.getElementById('cards');
var divCardsArray = new Array(
document.getElementById('card0'),
document.getElementById('card1'),
document.getElementById('card2'),
document.getElementById('card3'),
document.getElementById('card4'),
document.getElementById('card5'),
document.getElementById('card6'),
document.getElementById('card7'),
document.getElementById('card8'),
document.getElementById('card9')
);
return function() {
var mDivCardsArray=divCardsArray.slice();
while (divCards.childNodes.length > 0) {
divCards.removeChild(divCards.firstChild);
}
while (mDivCardsArray.length > 0) {
var i = Math.floor(Math.random() * mDivCardsArray.length);
divCards.appendChild(mDivCardsArray[i]);
mDivCardsArray.splice(i,1);
}
return false;
}
}()
//-->
</script>
</html>
Я пытался уплотниться, которые длятся в то время как оператор к:
while (mDivCardsArray.length > 0) {
divCards.appendChild(
mDivCardsArray.splice(
Math.floor(Math.random() * mDivCardsArray.length)
,1)[0]
);
}
но это довольно трудно считать и подверженный ошибке.
При движении с jQuery или Прототипом Вы могли следовать за той же базовой структурой и получить результат, который Вы ищете.
Лично, я думаю, что выглядит еще лучше, если Вы добавляете еще 2 отделения к cards сложите, расширьтесь divCardsArray, вставьте следующий блок стиля и добавьте этот код прямо после divCardsArray определение.
<html>
...
<style>
html,body{height:100%;width:100%;text-align:center;font-family:sans-serif;}
#cards,#cards div{padding:5px;margin:5px auto 5px auto;width:100px;}
</style>
...
<div id="cardA">CardA</div><div id="cardB">CardB</div>
...
var colorCardsArray = new Array(
'#f00', '#f80', '#ff0', '#8f0', '#0f0', '#0f8',
'#0ff', '#08f', '#00f', '#80f', '#f0f', '#f08' );
for(var i=0;i<divCardsArray.length;i++)
divCardsArray[i].style.backgroundColor=colorCardsArray[i];
...
</html>
Я предложил бы, чтобы Вы рандомизировали содержание, не сами фактические Отделения. Вы могли выполнить это путем помещения содержания в отдельные страницы HTML - никакая информация о заголовке или тело, просто содержание.
Затем используйте функцию на загрузке страницы для случайного присвоения, какое отделение получает, какое содержание и используют это для изменения содержания DIV:
<script type="text/javascript">
function ajaxManager(){
var args = ajaxManager.arguments;
if (document.getElementById) {
var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
}
if (x){
switch (args[0]){
case "load_page":
if (x)
{
x.onreadystatechange = function()
{
if (x.readyState == 4 && x.status == 200){
el = document.getElementById(args[2]);
el.innerHTML = x.responseText;
}
}
x.open("GET", args[1], true);
x.send(null);
}
break;
case "random_content":
ajaxManager('load_page', args[1], args[2]); /* args[1] is the content page, args[2] is the id of the div you want to populate with it. */
break;
} //END SWITCH
} //END if(x)
} //END AjaxManager
</script>