Подставить значение src в переменную
И снова здравствуйте. К делу. Есть несколько изображений
<table id="blocks_table"> <tr> <td><img class="menu_block" alt="Камень" src=/constructor/blocks/stone.png></td> <td><img class="menu_block" alt="Земля" src=/constructor/blocks/dirt.png></td> <td><a href="#"></a></td> </tr> </table> Достаю значение src с помощью JQuery
$(document).ready(function(){
$(".menu_block").click(function(){
var src = $(this).attr('src');
$(block_id).text(src);
});
});
теперь нужно чтобы в строке elem.style.backgroundImage = "src"; был src из переменной Помогите пожалуйста. Я в js нуб полный, а объяснить некому. |
<table id="blocks_table">
<tr>
<td><img class="menu_block" alt="Камень" src="/constructor/blocks/stone.png"></td>
<td><img class="menu_block" alt="Земля" src="/constructor/blocks/dirt.png"></td>
<td><a href="#"></a></td>
</tr>
</table>
<script>
show=function(){alert(this.src)}
;[].forEach.call(document.querySelectorAll(".menu_block"), function(block){
block.onclick=show
})
</script>
|
forwardonly2015, Можете объяснить слегка, как его использовать?
|
Цитата:
|
var elem = document.getElementById(obj_id);
Здесь другая таблица с пустыми ячейками |
Цитата:
|
Вот так примерно
<body>
<table id="blocks_table">
<tr>
<td><img class="menu_block" alt="Камень" src="http://javascript.ru/forum/images/smilies/laugh.gif"></td>
<td><img class="menu_block" alt="Земля" src="http://javascript.ru/forum/images/smilies/smile.gif"></td>
<td><a href="#"></a></td>
</tr>
</table>
<div id="element" style="border: 1px solid black; width: 20px; height: 20px"></element>
<script>
paste=function(){element.style.backgroundImage="url("+this.src+")"}
;[].forEach.call(document.querySelectorAll(".menu_block"), function(block){
block.onclick=paste
})
</script>
</body>
|
Заработало, только не в ту сторону. Сейчас я нажимаю на ячейку в пустой таблице, а потом на картинку, тогда ячейка закрашивается, а нужно чтобы после нажатия на картинку переменная получала ее срц и после этого при нажатии на пустую ячейку ее фон принимал значение переменной. Такая вот раскраска. Придумать придумал, а реализовать никак ) Будь добр растолкуй пожалуйста)
|
может так?
<body>
<table id="blocks_table">
<tr>
<td><img class="menu_block" alt="Камень" src="http://javascript.ru/forum/images/smilies/laugh.gif"></td>
<td><img class="menu_block" alt="Земля" src="http://javascript.ru/forum/images/smilies/smile.gif"></td>
<td><a href="#"></a></td>
</tr>
</table>
<div id="element" style="border: 1px solid black; width: 20px; height: 20px"></element>
<script>
tmp="http://javascript.ru/forum/images/smilies/angry.gif"
element.onclick=function(){element.style.backgroundImage="url("+tmp+")"}
paste=function(){tmp=this.src}
;[].forEach.call(document.querySelectorAll(".menu_block"), function(block){
block.onclick=paste
})
</script>
</body>
|
не работает
function func(obj_id) {
var elem = document.getElementById(obj_id);
document.getElementsByClassName('.menu_block').onclick = function(){
var src = this.src
}
elem.style.backgroundImage="url("+src+")"; };
Вот посмотри, нужно чтобы переменная src получила значение this.src но я тупой |
Beegun,
Не знаю, как тебе объяснить, ты пишешь полную ахинею:). Подожди, может кто-нибудь тебе подскажет решение на чистом жеквери. |
Beegun,
Или опиши задачу словами, подробно и полно, я завтра выложу тебе готовое решение, если пойму твое описание:) |
Задача такова. На странице 2 таблицы слева пустая ячейки имеют id obj_id. справа таблица с картинками разное количество. Нужно сделать раскраску, то-есть нажимаешь на картинку и в переменной записывается src картинки, а потом тыкаешь на ячейки пустой таблицы чтобы их bachground image получал src из переменной. Как-то так.
|
<style>
.col {
width: 50px;
height: 50px;
float: left;
margin: 10px;
border: 1px solid #000;
border-radius: 5px;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
}
</style>
<img class='img' src='http://yabs.yandex.ru/resource/CuIsr6zAhrqK3bLdAytNR6_banana_20141031_icon-retina.png' />
<img class='img' src='http://yabs.yandex.ru/resource/CNQFYjt7nmId0Iot3YY61k_banana_20141031_plane.png' />
<div class='col'></div>
<div class='col'></div>
<script>
var src;
Array.prototype.forEach.call(document.querySelectorAll('.img'/*селектор картинки*/), function (img) {
img.addEventListener('click', function () {
src = this.src;
}, false);
});
Array.prototype.forEach.call(document.querySelectorAll('.col'/*селектор ячейки*/), function (col) {
col.addEventListener('click', function () {
if (src) {
this.style.backgroundImage = 'url(' + src + ')';
}
}, false);
});
</script>
|
Всем огромное спасибо, tsigel, прикрутил ваш скрипт к своим таблицам, получилось то, что нужно. На последок, нужна стиралка, то-есть кнопка, после нажатия которой в переменную вписывается значение, которое будет убирать background image. Если не трудно)
|
Beegun,
Вам по нажатию кнопки надо менять src и тогда при клике на ячейку он заменит src на тот что вы поменяли в нажатии кнопки. Попробуйте, это не сложно! Если что - помогу. |
tsigel, решил вопрос так
eraser.onclick = function() {
src = "///";
Насколько это безобразно? |
Beegun,
Ну там наверно в консоли ошибки что он не может скачать этот урл, но для костыля сойдет. Не плохо! Для того чтобы сделать нормальный ластик надо удалять совсем 'backgroundImage'; Логику можно оставить почти ту же. Типа жмем на кнопку стирания, и записываем флаг что сейчас мы стираем. при клике на ячейку мы проверяем: если надо удалять - удаляем и убираем флаг обратно (чтобы он все время не удалял), а в противном случае смотрим на переменную src - и как и было. |
Ну да, так и есть, выглядит так
style="background-image: url(http:);Однако ошибок в консоли нет) Судя по тому что вы написали, скрипт будет весомый. |
Beegun,
да вобщем-то нет, просто я описал алгоритм. Я так понимаю, что Вы вполне в состоянии по мануалам понять как сделать что-либо если знаете что надо делать. Это очень хорошо, Вы просто пока не понимаете как придумать что делать, но по началу это нормальнльно. По сути вам надо добавить условие которое проверяет, нажимали ли на ластик. И если да - то удалять стиль, а если нет - то как раньше. Совсем немного, не правда ли? |
Очень похоже на школьные алгоритмы. Примерно понимаю, но саму конструкцию не представляю) Ох уж этот javascript ) Буду ковырять.
|
Beegun,
будет не получаться - пишите и выкладывайте свои попытки. Приятно помогать тем, кто вникает и старается. |
Я больше не могу. Весь день. В общем. Задача: есть кнопка
<input type="button" id="generate" value="Генерировать" onclick="generate ()"> Она запускает функцию
function generate () {
var rights = this.value;
if (rights == 'Ширина');
if (rights == 'Длина');
{
alert('Значение неверно');
}
alert('Значение верно');
}
;
(это тест, нужно чтобы если в полях нет букв, то срабатывал субмит, а если нет, то вылазило сообщение. Это позже. Суть в том что когда я нажимаю на кнопку, консоль говорит generate is not a function. Какого черта? |
Откликнитесь пожалуйста)
|
Beegun,
это происходит потому что функция должнабыть доступна на момент инициализации данного узла ДОМ дерева. Вам лучше дождаться события DOMContentLoaded и подписываться на обработчик из js. Почитайте про addEventListener |
только сейчас понял какую вчера ночью ахинею написал, в этой функции берется значение value кнопки, а мне нужно значение input формы. Мдаа
|
Вставил перед </body>
<script src="js/javascript_down.js">document.addEventListener("DOMContentLoaded", generate);</script>
Всеравно не функция |
Beegun,
а где generate? |
он в том скрипте
function generate(){
document.querySelectorAll('.num_only'/*селектор*/);
var rights = this.value;
if (rights == 'Ширина');
if (rights == 'Длина');
{
alert('Значение неверно');
}
alert('Значение верно');
}
;
|
Beegun,
в каком "том"? Если эта функция обернута в другую функцию, то из вне этой другой функции к ней нельзя достучаться. То есть:
$(function () {
function trololo() {...};
})();
console.log(window['trololo']);/// udefined
trololo();/// exeption: trololo is not a function | not defined
|
эта функция единственная в файле javascript__down.js кроме нее ничего нет там
|
Beegun,
Если есть возможность - дайте ссылку на проект. А скрипт подключен? |
Все на локальном сервере. Подключен перед </body>
</div>
<div id="footer">
<p>© Сделано для обучения</p>
</div>
</div>
<script src="js/javascript_down.js">document.addEventListener("DOMContentLoaded", generate);</script>
</body>
</html>
|
Может стоит переместить его в head?
|
Beegun,
ненене, у скрипта либо тело, либо src, просто разбейте это на 2 тега |
Не знал. Сдвиги есть, теперь после загрузки страницы вижу два алерта, сначала значение верно, потом значение не верно )) но после нажатия на функцию generate is not a function и ошибку показывает в строке с кнопкой
|
Beegun,
уберите из onclick и вешайте из js |
can not set property 'onclick' of null
document.getElementById(generate).onclick = function generate(){
document.querySelectorAll('.num_only'/*селектор*/);
var rights = this.value;
if (rights == 'Ширина');
if (rights == 'Длина');
{
alert('Значение неверно');
}
alert('Значение верно');
}
;
|
Сделал так
function gen(){
document.getElementById(generate).onclick = function(){
document.querySelectorAll('.num_only');
var rights = this.value;
if (rights == 'Ширина');
if (rights == 'Длина');
{
alert('Значение неверно');
}
alert('Значение верно');
}
}
;
Теперь gen is not definedЕсли так
<script>document.addEventListener("DOMContentLoaded", gen);</script>
<script src="js/javascript_down.js"></script>
а если так
<script src="js/javascript_down.js"></script>
<script>document.addEventListener("DOMContentLoaded", gen);</script>
то can not set property 'onclick' of null |
document.addEventListener("DOMContentLoaded", function () {
/// Здесь делаем все что надо:
// навешиваем обработчики
// используем загруженные в других скриптах функции
// gen() <-- чтобы это ни было
}, false);
У вас проблемы в понимании того что и когда происходит. Вы просите браузер работать с элементами/функциями, когда их не существует/не загружены. Во вне DOMContentLoaded вы можете объявлять функции, но если вы пишите
<script>document.addEventListener("DOMContentLoaded", gen);</script>
То функция "gen" должна быть загружена не когда произойдет событие "DOMContentLoaded", а на момент подписки на это событие. |
| Часовой пояс GMT +3, время: 13:33. |