Форум

karakym · #1 (**permalink**) 27.06.2015, 21:46

Доброго времени суток, есть такой блок на сайте:

<div id="style-switcher">
        	<span class="title">Фон сайта</span>
            <ul>
                <li><a class="bg-switcher" value="1" href="#">1</a></li>
                <li><a class="bg-switcher" value="2" href="#">2</a></li>
                <li><a class="bg-switcher" value="3" href="#">3</a></li>
                <li><a class="bg-switcher" value="4" href="#">4</a></li>
           </ul>
</div>

И к нему есть код:

jQuery(document).ready(function(){ 
$('.bg-switcher').click(
					function() {
						var bgNumber = $(this).attr("value");
						$('body').css("background-image","url(http://render911.ru/textures/floor/floor_"+bgNumber+".jpg)");
				});
});

Все работает все классно, но вот как видите ссылка картинки фона ведет на сайт с бесшовными текстурами.
Так вот в коде html 4 кнопки (текстуры), хотелось бы сделать универсально, что бы не добавлять много кнопок, а просто две кнопки "вперед", "назад" ну и что бы номер каждой текстуры выводился.
Так как на том сайте есть текстуры не только ламината, а и другие, хотелось бы сделать еще select с option каждого раздела (ведь ссылки на текстуры прямые, можно этим воспользоваться).

karakym · #2 (**permalink**) 27.06.2015, 22:02

На счет второго вопроса про select, сделал вот такое, не ругайте только синтаксиса не знаю.

<select class="type-switcher">
              <option value="1">Ламинат</option>
              <option value="2">Камень</option>
              <option value="3">Дерево</option>
            </select>

и такой вот код:

$('.type-switcher option').click(
					function() {
            var typeLink = "";
						var typeNumber = $(this).attr("value");
						if(typeNumber = "1") {
              typeLink = "http://render911.ru/textures/floor/floor_";
						}else if(typeNumber = "2") {
              typeLink = "http://render911.ru/textures/stone/stone_";
						}else {
              typeLink = "http://render911.ru/textures/wood/wood_";
						};
				});

А в предыдущий код немного изменил:

$('.bg-switcher').click(
					function() {
						var bgNumber = $(this).attr("value");
						$('body').css("background-image","url("+typeLink+bgNumber+".jpg)");
				});
});

рони · #3 (**permalink**) 27.06.2015, 22:28

karakym,
~~$('.type-switcher option').click~~

$('.type-switcher').change

...

var typeNumber = this.value

karakym · #4 (**permalink**) 27.06.2015, 22:32

Сообщение от рони

karakym,
~~$('.type-switcher option').click~~

$('.type-switcher').change

...

var typeNumber = this.value

Согласен, это уже разобрал, но вот проблемка такая:

jQuery(document).ready(function(){ 

$('.type-switcher').change(
					function() {
						var typeNumber = $(this).attr("value");
            if(typeNumber == "1") {
              typeLink = "http://render911.ru/textures/floor/floor";
						}else if(typeNumber == "2") {
              typeLink = "http://render911.ru/textures/stone/stone";
						}else {
              typeLink = "http://render911.ru/textures/wood/wood";
						};
            alert(typeLink);
				});

$('.bg-switcher').click(
					function() {
						var bgNumber = $(this).attr("value");
            alert(typeLink);
						$('body').css("background-image","url("+typeLink+"_"+bgNumber+".jpg)");
            
				});
});

Значит в первой функции нажатие выводит окошко alert(typeLink), а уже вторая функция не выводит это же окошко! Почему так? Что не правильно? И как правильно сцеплять 2 переменные?

рони · #5 (**permalink**) 27.06.2015, 22:34

karakym,
обьявить нужные переменные в строке 2 а не в телах функций

karakym · #6 (**permalink**) 27.06.2015, 22:47

Хорошо, с этим разобрался. А как мне теперь убрать кучу кнопок (нажатие на каждую кнопку заменяет фон своей текстурой) и сделать только 2: назад, вперед (что бы по нажатию +1 к переменнай кнопки или -1) при этом для каждого option можно было указать максимальное число (что бы например выше чем 37 не добавляло +1 к переменной)

рони · #7 (**permalink**) 27.06.2015, 22:47

karakym,

<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
        $(function() {
            var typeLink = "http://render911.ru/textures/floor/floor",
                bgNumber = 1;
            $(".type-switcher").change(function() {
                typeLink = {
                    1: "http://render911.ru/textures/floor/floor",
                    2: "http://render911.ru/textures/stone/stone",
                    3: "http://render911.ru/textures/wood/wood"
                }[this.value];
                fn()
            });
            $(".bg-switcher").click(function() {
                bgNumber = $(this).attr("value");
                fn()
            });

            function fn() {
                $("body").css("background-image", "url(" + typeLink + "_" + bgNumber + ".jpg)")
            }
            fn()
        });
    </script>
</head>

<body>
    <div id="style-switcher">
        <span class="title">Фон сайта</span>
        <ul>
            <li><a class="bg-switcher" value="1" href="#">1</a></li>
            <li><a class="bg-switcher" value="2" href="#">2</a></li>
            <li><a class="bg-switcher" value="3" href="#">3</a></li>
            <li><a class="bg-switcher" value="4" href="#">4</a></li>
        </ul>
    </div>

    <select class="type-switcher">
        <option value="1">Ламинат</option>
        <option value="2">Камень</option>
        <option value="3">Дерево</option>
    </select>


</body>

</html>

karakym · #8 (**permalink**) 27.06.2015, 23:05

рони,
Мерси

karakym · #9 (**permalink**) 27.06.2015, 23:10

Ребят, хочу еще заменить это:

<ul>
                <li><a class="bg-switcher" value="1" href="#">1</a></li>
                <li><a class="bg-switcher" value="2" href="#">2</a></li>
                <li><a class="bg-switcher" value="3" href="#">3</a></li>
                <li><a class="bg-switcher" value="4" href="#">4</a></li>
                <li><a class="bg-switcher" value="5" href="#">5</a></li>
                <li><a class="bg-switcher" value="6" href="#">6</a></li>
                <li><a class="bg-switcher" value="7" href="#">7</a></li>
                <li><a class="bg-switcher" value="8" href="#">8</a></li>
                <li><a class="bg-switcher" value="9" href="#">9</a></li>
                <li><a class="bg-switcher" value="10" href="#">10</a></li>
                <li><a class="bg-switcher" value="11" href="#">11</a></li>
                <li><a class="bg-switcher" value="12" href="#">12</a></li>
            </ul>

Этим:

<ul>
                <li><a class="next" href="#">></a></li>
                <li><a class="nuber" href="#">0</a></li>
                <li><a class="prew" href="#"><</a></li>
            </ul>

Но тут даже говнокод написать не могу((

karakym · #10 (**permalink**) 28.06.2015, 01:15

<!DOCTYPE html>
<html lang="en">
<head>
<title>Untitled</title>
<meta charset="utf-8">
<link href="http://red-web.pp.ua/advo.dp.ua2/styles.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<span style="background: rgba(255,0,0,0.5);font-size: 36px;margin:auto;font-family: 'Didact Gothic', sans-serif;color:#fff;padding: 20px;">УРА!!! Товарищи!!!</span>
<script>
$(function() {
            var typeLink = "http://render911.ru/textures/floor/floor",
                bgNumber = 1;
                numLink = 1;
                maxNum = {
                  1: "73",
                  2: "61",
                  3: "116",
                  4: "36",
                  5: "300"
                }
            $(".type-switcher").change(function() {
                numLink = $(this).attr("value");
                typeLink = {
                    1: "http://render911.ru/textures/floor/floor",
                    2: "http://render911.ru/textures/stone/stone",
                    3: "http://render911.ru/textures/wood/wood",
                    4: "http://render911.ru/textures/leather/leather",
                    5: "http://server3d.ru/textures/wallpapers/wallpaper"
                }[this.value];
                $(this).append("("+maxNum[numLink]+")");
                fn()
            });

            function fn() {
                $("body").css("background-image", "url(" + typeLink + "_" + bgNumber + ".jpg)");
                $(".nuber").html(bgNumber)
            }
            fn()
            /*NEXT*/
        $(".next").click(function() {
                if(bgNumber > (maxNum[numLink]-1)) {
                  fn()
                }else {
                  bgNumber++
                  fn()
                }
                $(".nuber").html(bgNumber)
                fn()
            });
        $(".prew").click(function() {
                if(bgNumber < 2) {
                  fn()
                }else {
                  bgNumber--;
                }
                $(".nuber").html(bgNumber)
                fn()
            });
        });
</script>
<div id="style-switcher">
        	<span class="title">Фон сайта</span>
            <ul>
                <li>
                <select class="type-switcher">
                  <option value="1" selected="selected">Ламинат</option>
                  <option value="2">Камень</option>
                  <option value="3">Дерево</option>
                  <option value="4">Кожа</option>
                  <option value="5">Обои</option>
                </select>
                </li>
                <li><input type="button" class="next" value=">"/></li>
                <li><span class="nuber">0</span></li>
                <li><input type="button" class="prew" value="<"/></li>
            </ul>
</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript