Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: как реализовать переключатель функций?

Здравствуйте, облазил пол форума и не нашел как реализовывается переключатель toogle() с выбором функций в новой версии jquery. Суть задачи: если нажимаешь на картинку, то она приобретает рамку цвета #cc0000, если зажата клавиша Shift, то рамка приобретает цвет #333333, а если еще раз нажимаем на картинку, то рамка пропадает. Если раньше можно было написать так:
Javascript
1
2
3
4
5
6
7
8
9
10
11
$('#div_for_img img').toggle(function(eventObject) {
    if (eventObject.shiftKey) {
        $(this).css({'border':'4px solid #cc0000'});
    }
    else {
        $(this).css({'border':'4px solid #333333'});
    }
},
function() {
    $(this).css({'border':'none'});
});
То, сейчас этот код не работает в jquery 1.9, он просто скрывает все картинку сразу при загрузке страницы. Можно, конечно, написать уйму проверок if else, но нету ли более простого решения?
Ответ: Благодарю! Сейчас получается вместо toggle - hasClass, removeClass, is(':visible'), т.е. сложнее, а значит хуже чем было.
Нормальный же метод был. Зачем разработчики от него отказались?..
Вопрос: Код считает сумму четырех факториалов. нужно реализовать через функцию

Я не так давно начал изучать язык JavaScript. До этого у меня не было опыта в программировании. Прошу помощи уважаемых знатоков.
Код вычисляет сумму четырех факториалов. Код работает, но есть необходимость реализовать через "функцию".

<html>

<head>
<title>calc</title>
<meta charset="UTF-8">
</head>

<body>
<form>
<input type="text" id="a1" placeholder="a1">
<input type="text" id="a2" placeholder="a2">
<p><input type="text" id="a3" placeholder="a3">
<input type="text" id="a4" placeholder="a4"></p>
<p><input type="button" value="Sum!" onclick="sumFac()"></p>
<p><button type="reset" accesskey=z>Очистить</button></p>
<p><input type="text" id="a5" placeholder="a5"></p>
</form>
<script>
[JS]function sumFac() {
var i, j, z, w,
f = 1,
s = 1,
x = 1,
y = 1;

        for (i = document.getElementById('a1').value; i >= 1; i--) {

            x *= i
        }

        for (j = document.getElementById('a2').value; j >= 1; j--) {

            y *= j
        }
        for (z = document.getElementById('a3').value; z >= 1; z--) {
            f *= z
        }
        for (w = document.getElementById('a4').value; w >= 1; w--) {
            s *= w
        }

        document.getElementById('a5').value = x + y + f + s;

    }[/JS]

</script>

</body>

</html>
Ответ:
Сообщение от nail.pnz
есть необходимость реализовать через "функцию"
Ищи в "своем" коде одинаковые части текста и оформляй их одной функцией...
Вопрос: Как реализовать две функции внутри одного (Для кредитного калькулятора)

Предстоит задача, сделать <option> select, задача состоит в следющем: Клиент выбирает тип кредита вводит срок, процентную ставку, и т.д и должен выбирать тип кредита из списка аннуитетный или дифференцированный, после нажимает на кнопку расчитать и по javascript выводится результат в поле id="xxx".
Цель: сделать, переписать функцию чтобы при выборе того или иного типа кредита (аннуитетный или дифференцированный) из списка выполнялась та или иная функция типа annuitet:, differenc: . И чтобы в конце списка таблицы (после таблицы) выводилась результат ИТОГО: Сумма составит столько и т.д
Помогите решить с данной задачей, составить список <option> 1) Аннуитетный 2) Дифференцированный далее по мере выбора задейстовать ту или инную функцию и выводить результат в таблице.

Пример того что необходимо:
Мой исходный код, которое необходимо модефицировать:
Ответ:
hVostt
Агнец за бортом,

надеюсь не меня имел в виду?


А не смешно получилось?)))))
Вопрос: Переключатель checkbox

Подскажите, кто знает, как можно реализовать переключатель через checkbox. Чтобы можно было поставить только одну птичку, при установке второй уже поставленная должна сбрасываться автоматически.
Ответ: а чем радио не устраивает?
она же специально для этого создана?
Вопрос: Функция выбора категории

Добрый день. В DLE при добавлении новости, есть возможность выбрать категорию из выпадающего списка. Как реализовать похожую функцию, только чтобы можно было выбрать из выпадающего списка новость, из определенной категории? 2-й день голову ломаю. Заранее спасибо.
Ответ: В том то и дело, что там того исходника.. пруд пруди. Стоит задача, при добавлении новостей, чтобы подгружался список уже имеющихся материалов из категории и при выборе одного из них, заполнялись определенные поля ввода (input). Сделал, названия новостей в выпадающем списке и при выборе одного из них, заполняется дополнительное поле с помощью JS, но мне надо ещё получить ID новости и при запросе к БД получить только тот, который выбран в списке, но не в этом суть, чтобы составить запрос к БД нужно передать переменную из JS в PHP. Вот здесь и проблема.. Знаю как-то ajax`ом можно, но.. Увы..
Вопрос: Переключатель табов в самих вкладках

Здравствуйте!
Пытаюсь немного переделать код, полученный на этом форуме, для того что бы переключатели табов находились в самих вкладках этого таба (что бы ниже можно было добавлять еще информацию)...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<style type='text/css'>
.box {
    display: none; 
    padding: 0px !important;
    background-color: #FFF;
}
.box.visible {
    display: block;
    padding: 10px;
}
ul.tabs {
    height: 27px;
    background: #FFF;
    border-bottom: 1px solid #777;
    padding: 0 4px;
    overflow: hidden;
    list-style: none;
}
.tabs li.current, .tabs li:hover {
    background-color:#52c8ff;
    color:#FFFFFF;
    border-color:#52c8ff;
    border-left-style: solid;
    border-right-style: solid;
    border-top-style: solid;
}
.tabs li {
    float: left;
    color: grey;
    line-height: 27px;
    margin-right: 1px !important;
    padding: 0 7px 10px 8px !important;
    font-weight: bold;
    cursor: pointer;
}
.tabs li.current span {
    color: #FFF;
}
.tabs li span {
    float: left;
    padding: 0 11px 0 0;
    height: 27px;
    color: #FFF;
}
</style>
<script type='text/javascript'>
$(function () {
	$('ul.tabs').delegate('li:not(.current)', 'click', function () {
		act(this);
	})
	function act(Obj){
		$(Obj).addClass('current').siblings().removeClass('current')
			.parents('div.section').find('div.box').eq($(Obj).index())
			.show().siblings('div.box').hide();
	};
})
</script>
</head>
<body>
<div class="section">
<!-- если переключатели стоят здесь, то все работает без проблем, но я хочу, что бы они были в самих табах
    <ul class="tabs">
        <li class="current">Вкладка 1</li>
        <li>Вкладка 2</li>
        <li>Вкладка 3</li>
     </ul>
-->	 
    <div class="box visible">содержимое вкладки 1
	<div>Здесь какая-то информация</div>
	<div>Здесь потом будет картинка</div>
<!-- а вот сюда я хочу вставить переключатель табов (типа буллетов), но так "глючит"-->
	    <ul class="tabs">
        <li class="current">Вкладка 1</li>
        <li>Вкладка 2</li>
        <li>Вкладка 3</li>
     </ul>
	 <div>А здесь еще какая-то информация</div>
    </div>
	
    <div class="box">содержимое вкладки 2
	<div>Здесь какая-то информация</div>
	<div>Здесь потом будет картинка</div>
<!-- а вот сюда я хочу вставить переключатель табов (типа буллетов), но так "глючит"-->
	    <ul class="tabs">
        <li class="current">Вкладка 1</li>
        <li>Вкладка 2</li>
        <li>Вкладка 3</li>
     </ul>
	 <div>А здесь еще какая-то информация</div>
    </div>
	
    <div class="box">содержимое вкладки 3  
	<div>Здесь какая-то информация</div>
	<div>Здесь потом будет картинка</div>
<!-- а вот сюда я хочу вставить переключатель табов (типа буллетов), но так "глючит"-->
	    <ul class="tabs">
        <li class="current">Вкладка 1</li>
        <li>Вкладка 2</li>
        <li>Вкладка 3</li>
     </ul>
	 <div>А здесь еще какая-то информация</div>
    </div>

</div>
</body>
</html>


При переключении табов таким способом периодически "глючит" переключатель - понимаю, что это происходит из-за того, что разным элементам li в различных вкладках присваивается класс "current", но как это исправить не знаю ((
Ответ: ...)))
я хочу, что бы у меня по середине вкладки таба были переключатели (не сверху, не снизу, а именно в середине, что бы можно было вставлять контент для вкладок выше или ниже этих переключателей)

...Возможно так делать и нельзя, и нужно использовать свойство css position: absolute... но я боюсь, что это скажется на адаптивности
Вопрос: Перенос выбранного переключателя на другую страницу

Подскажите как сделать:
Что бы гость выбрал один товар (из переключателя) и по нажатию кнопки оказался на другой страницы, и что бы на той страницы был тот товар который он выбрал, подскажите как это сделать если у меня HTML страница?

P.S Хостинг не поддерживает php на XTML страницы.

Код HTML5
1
2
3
<input name="beer" type="radio" value="1" /><img height="111"src="http://chit1243.at.ua/cfkaps/35.jpg" width="160" />
<input name="beer" type="radio" value="1" /><img height="111" src="http://chit1243.at.ua/cfkaps/36.jpg" width="160" />
<input name="beer" type="radio" value="1" /><img height="111" src="http://chit1243.at.ua/cfkaps/37.jpg" width="160" />
Ответ:
Сообщение от Fogg
P.S Хостинг не поддерживает php на XTML страницы.
Что вообще это значит?
Что бы ваш "гость" при нажатии на "переключатель" оказался на другой страницЕ его нужно перенаправить, для этого необходимо знать адрес той страницы на которую он должен попасть, правильно? Если сопоставить имеющийся у вас адрес страницы и минимальную логику, можно предположить, что вам просто необходимо поставить тег <a href='страница с товаром'>Товар 1</a>, все это можно обернуть в список и получить перечень товаров...
Код HTML5
1
2
3
4
5
<ul>
    <li><a href='страница с  товаром'>Товар 1</a></li>
    <li><a href='страница с  товаром'>Товар 2</a></li>
    <li><a href='страница с  товаром'>Товар 3</a></li>
</ul>
Список можно оформить так как вам будет угодно
Если использовать ссылки по их назначению религия не позволяет,
Код HTML5
1
2
3
4
5
<select id='goods'>
     <option value=''>Выберите товар</option>
    <option value='http://www.cyberforum.ru/html/'>Товар 1</option>
    <option value='http://www.cyberforum.ru/'>Товар 2</option>
</select>
Код Javascript
1
2
3
4
document.getElementById('goods').onchange = function(){
    if(this.value)
        document.location.href = this.value;
}
Вопрос: Как нормально скрыть элемент при выборе переключателя

Добрый день!

Можно ли нормально скрыть элемент при выборе переключателя, пользуясь только css?

Почему конструкция

input:checked ~ a { visibility: hidden;}


работает, а конструкция

input:checked ~ a{display: none;}


не работает?
Ответ:
Можно ли нормально скрыть элемент при выборе переключателя, пользуясь только css?
Да, можно

input:checked ~ a { visibility: hidden;}
input:checked ~ a{display: none;}
Должно работать одинаково. Возможно мешает другой селектор, например:

a{displat: block !important;}
Вопрос: Мультирегиональный сайт

Необходимо реализовать мультирегиональность на сайте wopdrpess в виде поддоменов. То есть например по запросам
moskva.mysite.com
minsk.mysite.com
и просто mysite.com
загружался один и тот же сайт с одной и той же базой.
Небольшое отличие будет заключаться только в телефонах, адресах офисов, и прайсах. Реализовать это планирую так: в файлах шаблона вставить плейсхолдер (предположим %header_phones%), создать одну таблицу в базе в которой и хранить индивидуальные номера/цены/адреса для каждого города. И при помощи самописного "минишаблонизатора" подгружать в плейсхолдер нужную строку из таблиц в зависимости от поддомена. На данный момент не знаю как правильно организовать загрузку самого сайта в поддоменах (без редиректа видимо, то есть чтоб при запуске moskva.mysite.com в адресной строке и осталось moskva.mysite.com при этом чтобы погрузился всегда один сайт mysite.com и сработал "шаблонизатор"). Судя по всему это делается несколькими строками в файле htaccess. Есть ли примеры как можно реализовать эту идею?
p.s. слышал о различных мультиязычных плагинах с помощью которых можно это реализовать. Может с ними будет быстрее и проще? каждый новый регион у них хранится как новая таблица с префиксом или как просто новое поле? Регионов будет достаточно много по этому хотелось бы рационально реализовать данную функцию.
Ответ: Может кому-то пригодится алгоритм как я это реализовал:
p.s. города были в виде поддоменов сайта.

1) в базе с таблицами wodpress создаю всего 1 таблицу с нужными редактируемым данными (как правило название, адрес, телефоны, кстати мне понадобилось для города несколько полей типа "Москва", "В Москве")

2) пиши миниплагин позволяющий работать с этой таблице в админке для редактирования поддомена.
более красиво когда этот плагин вынесен отдельно на боковую панель
PHP
1
2
3
4
5
6
7
8
9
10
11
// Добавляем пункт меню настроек в админку
add_action('admin_menu', function(){
                  //$page_title,         $menu_title,     $capability,   $menu_slug,    $function, $icon_url, $position
    add_menu_page( 'Список городов', 'Регионы', 'manage_options', 'index_page', 'index_page', '', 26 ); 
});
 
 
function index_page()
{
include 'index_page.php'; // тут должна лежать ваша реализация планига (а вернее главная страница плагина)
}
для работы с БД можно использовать готовые wp возможности
PHP
1
2
global $wpdb;
$item_list = $wpdb->get_results("SELECT * FROM regions");
кстати если ваш хостер "позволяет" вам автоматически создавать поддомены по созданию каталога на сервере, то можно в этом плагине полноценно реализовать ещё функции создания и удаления городов.

3) создаю поддомен(ы). в котором достаточно иметь 2 файла. индекс и htaccess.
Вот примерное содержимое .htaccess
AddDefaultCharset utf-8
php_value allow_url_fopen On
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>

а это часть реализации index.php
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<?php
header('Access-Control-Allow-Origin: *');
 
Class Loader{
    private $city;
    private $data;
 
    public function __construct($current_city) {
 
        $mysqli = new mysqli("localhost", "!!!", "!!!", "!!!");
        $mysqli->set_charset("utf8");
        $result = $mysqli->query("SELECT * FROM regions");
    
        $data = array();
        while ($row = mysqli_fetch_row($result)) {
            $data['id'] = $row[0];
            $data['code'] = $row[1];
            $data['country'] = $row[2];
     // *******
            $data['title_m'] = $row[8];
            $data['phone'] = $row[9];
            $data['address'] = $row[10];
            $data['map'] = $row[11];
            $data['cost_1'] = $row[12];
            $this->data = $data;
        }
 
    }
 
    public function parser(){
        $data = $this->data;
        $template = file_get_contents('http://zzz.шаблон_сайта.com'.$_SERVER['REQUEST_URI']);
        $template = str_replace('%city%', $data['title_i'], $template);
        $template = str_replace('%phone%', $data['phone'], $template);
        $template = str_replace('%address%', $data['address'], $template);
        $template = str_replace('%map%', $data['map'], $template);
        $template = str_replace('"/wp-', '"http://zzz.шаблон_сайта//wp-', $template);
 
        return $template;
        
    }
 
}
 
 
$city = str_replace('.шаблон_сайта', '', $_SERVER['SERVER_NAME']);
$html = new Loader($city);
echo $html->parser();
    ?>
за саму реализацию строго прошу не судить, так как это "накидал" достаточно быстро и в последствии немного перепишу ровнее, а пока старался описать сам алгоритм.

4) в админ панеле шаблона сайта в страницах (записях) где нужно использовать "разныличные" значения используем примерно след конструкции %city% , '%phone% или что-то другое если в 3ем пункте в парсере использовали другие символы.

p.s. есть некоторые подводные камни с которыми как и я можете столкнутся: На хостинге должен быть включен allow_url_fopen чтобы работал file_get_contents. Далее будьте осторожны со сторонними шрифтами которые используются в шаблоне, так как они могут не поддятнутся и может получится ошибка типа этой "Font from origin 'http://zzz.шаблог_сайта.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header...." Если заметили из примера сам шаблон у меня лежит не на осн. домене на zzz по этому не забудьте скрыть его от индексирования, настроить редиректы ну и для осн. доменного имени не забудьте создать и обработать регион. И последнее если будете писать подобный "шаблонизатор", то лучше не копировать для каждого поля (%phone%, %map% и ещё 50 возможных полей которые могут быть), а обратить внимание на функцию preg_replace_callback, то есть что-то типа этого:
HTML5
1
$code = preg_replace_callback("/%[a-zA-Z0-9_]{1,}%/",array($this,'my_f'),$code);
Возможно данный метод очередное изобретение велосипеда, но тем не менее он не занял у меня много времени, и мне не пришлось ставить большие плагины и хранить данные во множестве таблиц.
Таким образом запустив любую страницу, которая есть на сайте-шаблоне, вы получите эту же страницу на любом поддомене со значениями из нашей таблицы.
Вопрос: Раздельное выполнение функций

Как реализовать вот такой пример, строго не судите, тут только задумка реализации:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
 
<body>
 
    <select name="combobox1" size="1" id="c">
        <option value="500">А</option>
        <option value="520">Б</option>
      </select>
      
    <select name="combobox2" size="1" id="d">
        <option value="520">В</option>
        <option value="560">Г</option>
     </select>
        
    <select name="combobox3" size="1" id="g">   
        <option value="650">Д</option>
        <option value="700">Е</option>
    </select>
    
    <select name="combobox4" size="1" id="f">   
        <option value="750">Ж</option>
        <option value="800">З</option>
    </select>
 
    <input type="number" id="a" name="indexEditbox1" value="0">
    <input type="number" id="b" name="indexEditbox1" value="0">
    
    <input type="button" id="button1" value="Первая функция">
    <input type="button" id="button2" value="Вторая функция">
    <input type="button" id="button3" value="Третья функция">
    
    <div id="rezult" class="style3">
        <span style="color:#00FF00;font-family:'Times New Roman';font-size:21px;">
            <strong><em>Результат</em></strong>
        </span>
    </div>
 
<script>
 
var
a,
b,
c,
d,
g,
f,
rezult;
 
function myFunc1(){
rezult = (a * b * c)
}
 
function myFunc2(){
rezult = (a * b * d + g)
}
 
function myFunc3(){
rezult = (a * b * f)
}
 
var button1
bytton1.onclick = functionClick1 (){
a.addEventListener('blur', myFunc1.bind());
b.addEventListener('blur', myFunc1.bind());
с.addEventListener('blur', myFunc1.bind());
}
 
var button2
bytton2.onclick = functionClick2 (){
a.addEventListener('blur', myFunc2.bind());
b.addEventListener('blur', myFunc2.bind());
d.addEventListener('blur', myFunc2.bind());
g.addEventListener('blur', myFunc2.bind());
}
 
var button3
bytton3.onclick = functionClick3 (){
a.addEventListener('blur', myFunc3.bind());
b.addEventListener('blur', myFunc3.bind());
f.addEventListener('blur', myFunc3.bind());
}
</script>
</body>
</html>
Может, конечно, наверное и компактнее все прописать, ну как умею)))
Что хочу: нажали button1, переменные a, b, c, выполняют формулу в функции myFunc1(), нажали button2 значения обнуляются и выполняют переменные a, b, d, g, формулу в функции myFunc2() и т. д.
Ответ: Вот как реализовал, правда не работает)) Подскажите где что не так?
При нажатии на button1 выполняется функция function get1() которая присваивает переменной start функцию myFunc1 и т.д., а при нажатии на button4, присвоенная функция, переменной start, выполняется.
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<script type="text/javascript">
 
    function byId(id){ return document.getElementById(id); }
        
        // -------------------------------------------------------
        var intp_a, intp_b;
        var sel_c, sel_d, sel_e, sel_f;
    var start;
        var rezult = 0;
        var rezult_output = 0;
 
        var a,b,c,d,e,f;
 
        // -------------------------------------------------------
        window.addEventListener('load', function(){
 
            intp_a = byId('intp_a');
            intp_b = byId('intp_b');
            sel_c = byId('sel_c');
            sel_d = byId('sel_d');
            sel_e = byId('sel_e');
            sel_f = byId('sel_f');
            
            rezult_output = byId('rezult_output');
 
            //byId('button1').onclick = myFunc1;
            //byId('button2').onclick = myFunc2;
            //byId('button3').onclick = myFunc3;
 
            byId('button1').onclick = get1;
            byId('button2').onclick = get2;
            byId('button3').onclick = get3;
            byId('button4').onclick = start;
        });
        //--------------------------------------------------------
 
               function get1(){
        myFunc1 = start;
        };
        function get2(){
        myFunc2 = start;
        };
        function get3(){
        myFunc3 = start;
        };
      
        // -------------------------------------------------------
        function getValues(){
 
            a = parseInt( intp_a.value );
            b = parseInt( intp_b.value );
 
            c = parseInt( sel_c.value );
            d = parseInt( sel_d.value );
            e = parseInt( sel_e.value );
            f = parseInt( sel_f.value );
 
        }
 
        function printValues(){ 
            var out = '<b>Результат</b>: ["<span class="ctr">'+rezult+'</span>"]';
            rezult_output.innerHTML = out;
            console.log( out );
        }
 
        // -------------------------------------------------------
        function myFunc1() { 
            getValues(); rezult = (a * b * c); printValues();
 
        }
        
        function myFunc2() { 
            getValues(); rezult = (a * b * d + e);  printValues();
        }
        
        function myFunc3() { 
            getValues(); rezult = (a * b * f); printValues();
        }
        // -------------------------------------------------------
 
 
    </script>