JS Поменять местами блоки див

375
10 декабря 2016, 10:43

Доброго дня, подскажите пож. У меня есть два блока и скрипт, который определяет из какой страны зашли, как мне менять местами блок Беларусь и блок Россия в зависимости с какой страны зашли, например зашли из России значит должно быть так : Россия > Беларусь и наоборот?

var $strana; 
$.get("http://ipinfo.io", function(response) { 
    if(response.country == "RU") { 
 	document.getElementById("russ").style.display = "inline"; 
	document.getElementById("rln").style.color="#2987ac"; 
	document.getElementById("bel").style.display = "none"; 
 
	$strana='ru';	 
    } 
    else if(response.country == "BY") { 
        document.getElementById("bel").style.display = "inline"; 
		document.getElementById("rln").style.color="#2987ac"; 
		document.getElementById("russ").style.display = "none"; 
		 
		 
	$strana='by';	 
    } 
	   else { 
        document.getElementById("russ").style.display = "inline"; 
		document.getElementById("enln").style.color="#2987ac"; 
		 
	$strana='by';	 
    } 
 
}, "jsonp"); 
 
function myFunction() { 
	 
if ($strana!="by")  
{ 
	alert('тут код перехода'); 
	$strana='by'; 
} 
 else  
{ 
    document.getElementById("bel").style.display = "inline"; 
	document.getElementById("russ").style.display = "inline"; 
	document.getElementById("aclb").style.color="#2987ac"; 
	document.getElementById("art").style.color="#2987ac"; 
	document.getElementById("r_phone").style.display = "none"; 
	document.getElementById("b_phone").style.color="#2987ac"; 
	document.images["art"].src = 'assets/template/img/arrow_href.png'; 
 
} 
 
} 
 
function myFunction2() { 
if ($strana!="ru")  
{ 
	alert('тут код перехода'); 
	$strana='ru'; 
} 
else{ 
    document.getElementById("russ").style.display = "inline"; 
	document.getElementById("bel").style.display = "inline"; 
	document.getElementById("aclr").style.color="#2987ac"; 
	document.getElementById("art").style.color="#2987ac"; 
	document.getElementById("b_phone").style.display = "none"; 
	document.getElementById("r_phone").style.color="#2987ac"; 
	document.images["art"].src = 'assets/template/img/arrow_href.png'; 
} 
}
.rightCenter{ 
    float: left; 
    width: 210px; 
    margin-top: 3px; 
    font-family: Arial Narrow; 
    font-size: 8.9pt; 
	height:34px; 
} 
.active-link{ 
transition: all 0.4s; 
vertical-align: middle; 
} 
#bel{ 
    width: 51px; 
    float: left; 
} 
#russ{ 
 width:50px; 
 float:left; 
 margin-left:3px; 
} 
 
.arrow_top{ 
vertical-align: middle; 
float:left; 
width:20px; 
  height:20px 
} 
.arrow_top:hover{ 
cursor:pointer; 
}
<div class="rightCenter"> 
<div id="bel" onClick="myFunction()">			 
  <a href="#" class="active-link" id="aclb">БЕЛАРУСЬ</a> 
  <div class="rightBottom"  id="b_phone"> 
	  +3-211-111-111-11 
  </div> 
</div> 
					 
<img src="http://wishbone.io/images/right.png" class="arrow_top" id="art" > 
 
<div id="russ" onClick="myFunction2()" > 
	<a href="#" class="active-link" id="aclr">РОССИЯ</a>  
  <div class="rightBottom" id="r_phone" > 
	+7-985-698-52-31 
  </div> 
</div> 
</div>

Answer 1

Имхо достаточно добавить такого кусочка кода, который перемещает русскую локацию в начало родителя

//begin
if (response.country == "RU") {
    $('#russ').prependTo('.rightCenter');
    $('.arrow_top').insertAfter('#russ');
}
//end

Результирующий код

$(function() { 
  var $strana; 
  $.get("http://ipinfo.io", function(response) { 
 
    //begin 
    if (response.country == "RU") { 
      $('#russ').prependTo('.rightCenter'); 
      $('.arrow_top').insertAfter('#russ'); 
    } 
    //end 
 
    if (response.country == "RU") { 
      document.getElementById("russ").style.display = "inline"; 
      document.getElementById("rln").style.color = "#2987ac"; 
      document.getElementById("bel").style.display = "none"; 
 
      $strana = 'ru'; 
    } else if (response.country == "BY") { 
      document.getElementById("bel").style.display = "inline"; 
      document.getElementById("rln").style.color = "#2987ac"; 
      document.getElementById("russ").style.display = "none"; 
 
 
      $strana = 'by'; 
    } else { 
      document.getElementById("russ").style.display = "inline"; 
      //document.getElementById("enln").style.color = "#2987ac"; 
 
      $strana = 'by'; 
    } 
 
  }, "jsonp"); 
 
  function myFunction() { 
 
    if ($strana != "by") { 
      alert('тут код перехода'); 
      $strana = 'by'; 
    } else { 
      document.getElementById("bel").style.display = "inline"; 
      document.getElementById("russ").style.display = "inline"; 
      document.getElementById("aclb").style.color = "#2987ac"; 
      document.getElementById("art").style.color = "#2987ac"; 
      document.getElementById("r_phone").style.display = "none"; 
      document.getElementById("b_phone").style.color = "#2987ac"; 
      document.images["art"].src = 'assets/template/img/arrow_href.png'; 
 
    } 
 
  } 
 
  function myFunction2() { 
    if ($strana != "ru") { 
      alert('тут код перехода'); 
      $strana = 'ru'; 
    } else { 
      document.getElementById("russ").style.display = "inline"; 
      document.getElementById("bel").style.display = "inline"; 
      document.getElementById("aclr").style.color = "#2987ac"; 
      document.getElementById("art").style.color = "#2987ac"; 
      document.getElementById("b_phone").style.display = "none"; 
      document.getElementById("r_phone").style.color = "#2987ac"; 
      document.images["art"].src = 'assets/template/img/arrow_href.png'; 
    } 
  } 
});
.rightCenter { 
  float: left; 
  width: 210px; 
  margin-top: 3px; 
  font-family: Arial Narrow; 
  font-size: 8.9pt; 
  height: 34px; 
} 
.active-link { 
  transition: all 0.4s; 
  vertical-align: middle; 
} 
#bel { 
  width: 51px; 
  float: left; 
} 
#russ { 
  width: 50px; 
  float: left; 
  margin-left: 3px; 
} 
.arrow_top { 
  vertical-align: middle; 
  float: left; 
  width: 20px; 
  height: 20px 
} 
.arrow_top:hover { 
  cursor: pointer; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<div class="rightCenter"> 
  <div id="bel" onClick="myFunction()"> 
    <a href="#" class="active-link" id="aclb">БЕЛАРУСЬ</a> 
    <div class="rightBottom" id="b_phone"> 
      +3-211-111-111-11 
    </div> 
  </div> 
 
  <img src="http://wishbone.io/images/right.png" class="arrow_top" id="art"> 
 
  <div id="russ" onClick="myFunction2()"> 
    <a href="#" class="active-link" id="aclr">РОССИЯ</a>  
    <div class="rightBottom" id="r_phone"> 
      +7-985-698-52-31 
    </div> 
  </div> 
</div>

READ ALSO
На маке не работает шрифты в полях
HTML

На маке не работает шрифты в полях

Свой шрифт почему-то не работает именно в полях (хром) на маке

 321
Как предотвратить залезание div под div [закрыто]
HTML

Как предотвратить залезание div под div [закрыто]

ЗдравствуйтеЯ ставлю блоки которые при уменьшении изображения должны сдвигаться друг под друга, но не должны заползать под меню которое...

 347
Поставить блок &lt;div&gt; друг на против друга
HTML

Поставить блок <div> друг на против друга

Как сделать так, чтобы блок 3 встал напротив блока 1, а не напротив блока 2, как сейчас?

 298
HTML оформление текста из string через JAVA
HTML

HTML оформление текста из string через JAVA

Доброе утро, коллеги! У меня есть текст в string

 426