Переключайтесь между двумя парами div, когда вы нажимаете на них - PullRequest
Новая
       8

Переключайтесь между двумя парами div, когда вы нажимаете на них

1 голос
/ 24 марта 2012

Я нашел в Интернете некоторый код Javascript для переключения между двумя изображениями при нажатии на них, как в этом примере .

Теперь мне интересно, как достичь того же результата, используя div с изображениями внутри div.

И маленькое, и большое изображение будут фоновым изображением div, который находится внутри другого div, который формирует границу (мне нужно сделать это, чтобы иметь возможность установить радиус внутренней границы изображения, который я могу когда я использую внутренний div и устанавливаю его радиус границы). Итак, у меня есть: 

<div class="bordersmallpicture"><div class="smallpicture"></div></div>

и 

<div class="borderlargepicture"><div class="largepicture"></div></div>

Как я могу сказать Javascript переключаться между этими двумя парами div вместо изображений? Вот код Javascript, который я нашел для изображений: 

<script>
var imageURL = "small-picture.png";

if (document.images) {
var smallpicture = new Image();
 smallpicture.src = "small-picture.png";

var largepicture = new Image();
largepicture.src = "large-picture.png";
}

function changeImage() {
 if (document.images) {
   if (imageURL == "large-picture.png") {imageURL = "small-picture.png";}
   else {imageURL = "large-picture.png";}

   document.myimage.src = imageURL;
 }
}
</script>

И часть HTML: 

<a href="#" onclick="changeImage();"><img src="small-picture.png" name="myimage" title="Click to resize" alt="tree"></a>

Может кто-нибудь дать мне подсказку, как редактировать этот код для переключения между перечисленными выше парами div? Или для работы с divs понадобится совершенно новый код?

1 Ответ

0 голосов
/ 24 марта 2012

Вам просто нужно переключать классы. Смотрите пример выполнения , использующий ваши изображения в качестве фона CSS в классах: 

<div id="border-div" class="bordersmallpicture">
  <div id="image-div" class="smallpicture"></div>
</div>

Javascript становится: 

<script>
function changeImage() {
  var currentClass = document.getElementById('border-div').className;
  if(currentClass == 'borderlargepicture') {
    document.getElementById('border-div').className = 'bordersmallpicture';
    document.getElementById('image-div').className = 'smallpicture';
  } else {
    document.getElementById('border-div').className = 'borderlargepicture';
    document.getElementById('image-div').className = 'largepicture';
  }
}
</script>

Если вы ожидаете много использовать javascript, я рекомендую использовать jQuery, чтобы сделать код проще: 

<script>
function changeImage() {
 $('#border-div').toggleClass('bordersmallpicture').toggleClass('borderlargepicture');
 $('#image-div').toggleClass('smallpicture').toggleClass('largepicture');
 }
</script>

toggleClass включает / выключает класс (Вот пример )

...