Несколько сценариев одной функцией
Добрый день, пытаюсь написать несколько сценариев одно функцией.
И так..
function change1() {
change1(document.getElementById("center"));
}
function change1(popox) {
if (popox == document.getElementById("products")) {
document.getElementById("center").innerHTML = "Products"
}
}
function change1(popox1) {
if (popox1 == document.getElementById("services")) {
document.getElementById("center").innerHTML = "Services"
}
}
<div onclick="change1()" class="products"></div> <div onclick="change1()" class="services"></div> При клике на products, отображает то что должно быть у services. Тоесть не работает. В чем тут проблема? Или как правильно написать два сценария одной функцией? |
Цитата:
<style type="text/css">
div[onclick^="change1"]{
border:red solid 1px;
width:100px;
margin:2px;
padding:6px;
}
</style>
<script type="text/javascript">
function change1(a) {
a.innerHTML = a.id;
}
</script>
<div onclick="change1(this)" id="products"></div>
<div onclick="change1(this)" id="services"></div>
|
Цитата:
|
div[onclick^="change1"]. Это css - http://www.weblibrary.biz/css/selekt...tory-atributov
можно пока выбросить
<style type="text/css">
div {
border:red solid 1px;
width:100px;
margin:2px;
padding:6px;
}
</style>
<script type="text/javascript">
function change1(a) {
a.innerHTML = a.className;
}
</script>
<div onclick="change1(this)" class="products"></div>
<div onclick="change1(this)" class="services"></div>
|
a.innerHTML = a.className;
Мне нужно добавить контент, а не просто имя. Как это реализовать? |
Marker,
Вы запустите функцию и кликните Что не так ? |
Цитата:
|
Ну во первых я не понял a.innerHTML. Причем тут a.innerHTML если я хочу работать с document.getElementbyId("products").innerHTML ? Я не очень понимаю этот метод - пару сценариев одной функцией. Пожалуйста обьясните мне. Я уже сказал как мне именно надо.
|
Marker,
<div onclick="change1(this)" передает в функцию ссылку на сам элемент в самой функции this уже выступает как a function change1(a) { Вместо а можно ставить другое имя параметру и работать с ним
<style type="text/css">
div {
border:red solid 1px;
width:100px;
margin:2px;
padding:6px;
}
</style>
<script type="text/javascript">
function change1(elem) {
elem.innerHTML = elem.className;
}
</script>
<div onclick="change1(this)" class="products"></div>
<div onclick="change1(this)" class="services"></div>
|
вы пишите не правильный пример.
<div class="main"></div> <div class="products"></div> Это кнопки <div id="center"></div> Это див контента. Мне надо чтобы кликнув на products в center отобразило какой нибудь текст ( там не будет только имя класса, там будет текст). А кликнув на services - другой текст. Все это надо сделать путем одной функции, передачей параметров. Как сделать я это не понял. Прошу написать нормальный пример, чтобы я его мог применить - и понять его. |
<style type="text/css">
div[class] {
border:red solid 1px;
width:130px;
margin:2px;
padding:6px;
}
div[id] {
width:230px;
height:40px;
padding:6px;
border:blue solid 1px;
}
</style>
<script type="text/javascript">
var obj={
Marker:'Текст для Marker',
products:'Текст для products',
services:'BLa-BLa-Текст для services'
}
function change1(elem) {
document.getElementById('center').innerHTML = obj[elem.className];
}
</script>
<div id="center"></div>
<br />
<br />
<div onclick="change1(this)" class="products"></div>
<div onclick="change1(this)" class="services"></div>
<div onclick="change1(this)" class="Marker"></div>
|
Но он показывает в том же диве, а мне надо в другом!
Я же обьяснил как мне надо :) Ваш пример добавляет в тот же див где расположен onclick а мне надо в другом. См. выше как надо. Спасибо |
Marker,
:) Поправил |
Спасибо, работает!
Но дело в том что наш учитель ещё не обьяснял такой синтакс
var obj={
Marker:'Текст для Marker',
products:'Текст для products',
services:'BLa-BLa-Текст для services'
}
obj[elem.className];
Я уверен он бы не стал задавать задания с таким решением. Может смогу обьяснить словами, как он говорит логически сделать. Делаем функцию change (popox). Если popox равно document.getElementById("products"), то getElementById("center").innerHTML = "ТЕКСТ ДЛЯ PRODUCT". Так же со всеми другими. Задачу надо решить параметрами функции. В первом сообщении я напиасал, как я представляю задачу логически, но она не работает, пожайлуста можете переделать код именно так, как я сказал? Буду очень благодарен. |
<style type="text/css">
div[class] {
border:red solid 1px;
width:130px;
margin:2px;
padding:6px;
}
div[id] {
width:230px;
height:40px;
padding:6px;
border:blue solid 1px;
}
</style>
<script type="text/javascript">
function change1(elem) {
var a=elem.className;
var b='';
if(a=='products') b = 'Текст для products';
if(a=='main') b = 'BLa-BLa-Текст для main';
document.getElementById('center').innerHTML = b;
}
</script>
<div id="center"></div>
<br />
<br />
<div onclick="change1(this)" class="main"></div>
<div onclick="change1(this)" class="products"></div>
|
Теперь лучше, но все же, мы не учили var a=elem.className,b; Как можно заменить, как сделать так как я написал?
|
Marker,
document.getElementById("products") - не получицо - посколь у Вас класс а не id Для ID нужны div такого вида <div onclick="change1()" id="main"></div> <div onclick="change1()" id="products"></div> |
Ну пусть будут id, напишите с document.getElementById("products"), но не только для products, но и для main. Я изменю класс на id
|
<style type="text/css">
div {
border:red solid 1px;
width:130px;
margin:2px;
padding:6px;
}
#center {
width:230px;
height:40px;
padding:6px;
border:blue solid 1px;
}
</style>
<script type="text/javascript">
function change1() {
var b = 'BLa-BLa-Текст для main';
document.getElementById('center').innerHTML = b;
}
function change2() {
var b= 'BLa-BLa-Текст для products';
document.getElementById('center').innerHTML = b;
}
</script>
<div id="center"></div>
<br />
<br />
<div onclick="change1()" class="main"></div>
<div onclick="change2()" class="products"></div>
|
Спасибо!! То что надо!
Если у вас есть время, напишите мне пару задач вроде этого(используя тот же метод) Чтобы это знание во мне закрепилось! Ещё раз благодарю! |
| Часовой пояс GMT +3, время: 16:20. |