Обращение к элементу

inex · October 12, 2012

Добрый день, как обратиться к элементу если у нет ни класса ни id? Возможно ли через onclick? Нужно подменить src у картинок.

Вот пример:


<div onclick="simpletag('b')"><img title="$lang[bb_t_b]" src="{THEME}/bbcodes/b.gif" width="23" height="25" border="0" alt="" /></div>
<div onclick="simpletag('i')"><img title="$lang[bb_t_i]" src="{THEME}/bbcodes/i.gif" width="23" height="25" border="0" alt="" /></div>
<div onclick="simpletag('u')"><img title="$lang[bb_t_u]" src="{THEME}/bbcodes/u.gif" width="23" height="25" border="0" alt="" /></div>
<div onclick="simpletag('s')"><img title="$lang[bb_t_s]" src="{THEME}/bbcodes/s.gif" width="23" height="25" border="0" alt="" /></div>

Заранее спасибо!

USF · October 12, 2012

div > img[att$="bbcodes"]

Edited October 12, 2012 by USF

Bryant-24 · October 12, 2012

Я конечно могу ошибаться, но может начинать плясать от параметра $(this), указывая какая конкретно картинка Вам нужна.

wwt · October 12, 2012

document.getElementsByTagName("img");

вернет массив элементов img со страницы.

можно сделать более конкретную выборку если вместо document использовать другой объект к примеру


document.getElementById("myblock").getElementsByTagName("img");

вернет массив элементов img из блока с id myblock

Дальше уже можно искать конкретный элемент с помощью сравнения каких либо атрибутов, к примеру


var arr = document.getElementById("myblock").getElementsBytagName("img");
for(var i = 0; i < arr.length; i++){
   if(arr[i].src == "http://mysite.ru/test.png")
      arr[i].src = "http://mysite.ru/test2.png";
}

проверяем src и у совпавшего заменяем.

PS Вообще не очень понятно когда должна меняться картинка при клике?

Я конечно могу ошибаться, но может начинать плясать от параметра $(this), указывая какая конкретно картинка Вам нужна.

что такое параметр $(this) ? )))

если при клике то все просто:


<img src="http://tratata.ta/image1.jpg" onclick="this.src='http://tratata.ta/image2.jpg';return false;">

Edited October 12, 2012 by wwt

inex · October 12, 2012

В общем обрисую ситуацию, у cms dle нужно заменить иконки с формата gif на png, но проблема в том что они не в стилях прописаны, а в php самой cms(хочется попробовать без редактирования cms), и я решил попробовать заменить их так

$(.someclass img).attr("src","{THEME}/bbcodes/myimage.png");

но потом столкнулся с проблемами:

1) картинки обёрнуты в div у которого из атрибутов только onclick

2) всё это дело завёрнуто в div без id и класса

Добавил экспериментально к диву в php айди test и попробовал как вы подсказали

jQuery(document).ready(function($){
    var arr = document.getElementById("test").getElementsBytagName("img"
    );
    for(var i = 0; i < arr.length; i++){
        if(arr[i].src == "{THEME}/bbcodes/upload.gif")
            arr[i].src = "{THEME}/bbcodes/upload.png";
    }
});

но ноль эмоций...

Вот как вообще это всё выглядит в php файле


$code = <<<HTML
<div id="test" style="width:98%; overflow: hidden; border:1px solid #BBB; background-image:url('{THEME}/bbcodes/bg.gif');">
<div id="b_b" class="editor_button" onclick="simpletag('b')"><img title="$lang[bb_t_b]" src="{THEME}/bbcodes/b.gif" width="23" height="25" border="0" alt="" /></div>
<div id="b_i" class="editor_button" onclick="simpletag('i')"><img title="$lang[bb_t_i]" src="{THEME}/bbcodes/i.gif" width="23" height="25" border="0" alt="" /></div>
<div id="b_u" class="editor_button" onclick="simpletag('u')"><img title="$lang[bb_t_u]" src="{THEME}/bbcodes/u.gif" width="23" height="25" border="0" alt="" /></div>
<div id="b_s" class="editor_button" onclick="simpletag('s')"><img title="$lang[bb_t_s]" src="{THEME}/bbcodes/s.gif" width="23" height="25" border="0" alt="" /></div>
<div class="editor_button"><img src="{THEME}/bbcodes/brkspace.gif" width="5" height="25" border="0" alt="" /></div>
<div class="editor_button" onclick="tag_image()"><img title="$lang[bb_b_img]" src="{THEME}/bbcodes/image.gif" width="23" height="25" border="0" alt="" /></div>
{$image_upload}
<div class="editor_button"><img src="{THEME}/bbcodes/brkspace.gif" width="5" height="25" border="0" alt="" /></div>
<div id="b_emo" class="editor_button"  onclick="ins_emo(this);" style="width:36px;" align="center"><img title="$lang[bb_t_emo]" src="{THEME}/bbcodes/emo.gif" width="23" height="25" border="0" alt="" /></div>
<div class="editor_button"><img src="{THEME}/bbcodes/brkspace.gif" width="5" height="25" border="0" alt="" /></div>
<div class="editor_button" onclick="tag_url()"><img title="$lang[bb_t_url]" src="{THEME}/bbcodes/link.gif" width="23" height="25" border="0" alt="" /></div>
<div class="editor_button" onclick="tag_leech()"><img title="$lang[bb_t_leech]" src="{THEME}/bbcodes/leech.gif" width="23" height="25" border="0" alt="" /></div>
<div class="editor_button" onclick="tag_email()"><img title="$lang[bb_t_m]" src="{THEME}/bbcodes/email.gif" width="23" height="25" border="0" alt="" /></div>
<div class="editor_button"><img src="{THEME}/bbcodes/brkspace.gif" width="5" height="25" border="0" alt="" /></div>
<div class="editor_button" onclick="tag_video()"><img title="$lang[bb_t_video]" src="{THEME}/bbcodes/mp.gif" width="23" height="25" border="0" alt="" /></div>
<div class="editor_button" onclick="tag_audio()"><img title="$lang[bb_t_audio]" src="{THEME}/bbcodes/mp3.gif" width="23" height="25" border="0" alt="" /></div>
<div class="editor_button"><img src="{THEME}/bbcodes/brkspace.gif" width="5" height="25" border="0" alt="" /></div>
<div id="b_hide" class="editor_button" onclick="simpletag('hide')"><img title="$lang[bb_t_hide]" src="{THEME}/bbcodes/hide.gif" width="23" height="25" border="0" alt="" /></div>
<div id="b_quote" class="editor_button" onclick="simpletag('quote')"><img title="$lang[bb_t_quote]" src="{THEME}/bbcodes/quote.gif" width="23" height="25" border="0" alt="" /></div>
<div id="b_code" class="editor_button" onclick="simpletag('code')"><img title="$lang[bb_t_code]" src="{THEME}/bbcodes/code.gif" width="23" height="25" border="0" alt="" /></div>
<div class="editor_button"><img src="{THEME}/bbcodes/brkspace.gif" width="5" height="25" border="0" alt="" /></div>
<div class="editor_button" onclick="pagebreak()"><img title="$lang[bb_t_br]" src="{THEME}/bbcodes/pbreak.gif" width="23" height="25" border="0" alt="" /></div>
<div class="editor_button" onclick="pagelink()"><img title="$lang[bb_t_p]" src="{THEME}/bbcodes/page.gif" width="23" height="25" border="0" alt="" /></div>
<div class="editor_button_brk"><img src="{THEME}/bbcodes/brkspace.gif" width="5" height="25" border="0" alt="" /></div>
<div class="editor_button" style="padding-top:4px;width:120px;"><select name="bbfont" class="editor_button" onchange="insert_font(this.options[this.selectedIndex].value, 'font')"><option value='0'>{$lang['bb_t_font']}</option><option value='Arial'>Arial</option><option value='Arial Black'>Arial Black</option><option value='Century Gothic'>Century Gothic</option><option value='Courier New'>Courier New</option><option value='Georgia'>Georgia</option><option value='Impact'>Impact</option><option value='System'>System</option><option value='Tahoma'>Tahoma</option><option value='Times New Roman'>Times New Roman</option><option value='Verdana'>Verdana</option></select></div>
<div class="editor_button" style="padding-top:4px;width:65px;"><select name="bbsize" class="editor_button" onchange="insert_font(this.options[this.selectedIndex].value, 'size')"><option value='0'>{$lang['bb_t_size']}</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select></div>
<div class="editor_button"><img src="{THEME}/bbcodes/brkspace.gif" width="5" height="25" border="0" alt="" /></div>
<div id="b_left" class="editor_button" onclick="simpletag('left')"><img title="$lang[bb_t_l]" src="{THEME}/bbcodes/l.gif" width="23" height="25" border="0" alt="" /></div>
<div id="b_center" class="editor_button" onclick="simpletag('center')"><img title="$lang[bb_t_c]" src="{THEME}/bbcodes/c.gif" width="23" height="25" border="0" alt="" /></div>
<div id="b_right" class="editor_button" onclick="simpletag('right')"><img title="$lang[bb_t_r]" src="{THEME}/bbcodes/r.gif" width="23" height="25" border="0" alt="" /></div>
<div class="editor_button"><img src="{THEME}/bbcodes/brkspace.gif" width="5" height="25" border="0" alt="" /></div>
<div id="b_color" class="editor_button" onclick="ins_color(this);"><img title="$lang[bb_t_color]" src="{THEME}/bbcodes/color.gif" width="23" height="25" border="0" alt="" /></div>
<div id="b_spoiler" class="editor_button" onclick="simpletag('spoiler')"><img title="$lang[bb_t_spoiler]" src="{THEME}/bbcodes/spoiler.gif" width="23" height="25" border="0" alt="" /></div>
<div class="editor_button"><img src="{THEME}/bbcodes/brkspace.gif" width="5" height="25" border="0" alt="" /></div>
<div class="editor_button" onclick="tag_flash()"><img title="$lang[bb_t_flash]" src="{THEME}/bbcodes/flash.gif" width="23" height="25" border="0" alt="" /></div>
<div class="editor_button" onclick="tag_youtube()"><img title="$lang[bb_t_youtube]" src="{THEME}/bbcodes/youtube.gif" width="23" height="25" border="0" alt="" /></div>
<div class="editor_button" onclick="tag_typograf(); return false;"><img title="$lang[bb_t_t]" src="{THEME}/bbcodes/typograf.gif" width="23" height="25" border="0" alt=""></div>
<div class="editor_button"><img src="{THEME}/bbcodes/brkspace.gif" width="5" height="25" border="0" alt="" /></div>
<div id="b_list" class="editor_button" onclick="tag_list('list')"><img title="$lang[bb_t_list1]" src="{THEME}/bbcodes/list.gif" width="23" height="25" border="0"></div>
<div id="b_ol" class="editor_button" onclick="tag_list('ol')"><img title="$lang[bb_t_list2]" src="{THEME}/bbcodes/ol.gif" width="23" height="25" border="0"></div>
<div class="editor_button"><img src="{THEME}/bbcodes/brkspace.gif" width="5" height="25" border="0" alt="" /></div>
</div>
HTML;

wwt · October 12, 2012

Раз так то можно в самом php заменить расширения картинок ручками либо с помощью регулярки.

К примеру добавить после


HTML;

вот это:


$code = preg_replace("#(src=\".+/bbcodes/.+).gif\"#", "$1.png\"", $code);

У вас ничего не вышло ибо вместо {THEME} на сервере подставляется часть пути.

Edited October 12, 2012 by wwt

inex · October 12, 2012

Спасибо wwt! Отличное простое решение, а я велосипед изобретал :rolleyes:

Sign In

Обращение к элементу

Question

inex

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

USF

Link to comment

Share on other sites

Bryant-24

Link to comment

Share on other sites

wwt

Link to comment

Share on other sites

inex

Link to comment

Share on other sites

wwt

Link to comment

Share on other sites

inex

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information