jQuery: применить CSS к родительскому DIV - PullRequest
Новая
       33

jQuery: применить CSS к родительскому DIV

1 голос
/ 27 марта 2012

Допустим, я делаю код. Этот код использует kontextua ads 

<div class="pread">
    <div class="postad kontextuaDisplayREGULARS728x90">
    <div style="display: block !important; margin-bottom: 0px !important; margin-left: 0px !important; margin-right: 0px !important; margin-top: 0px !important; overflow-x: hidden !important; overflow-y: hidden !important; padding-bottom: 2px !important; padding-left: 4px !important; padding-right: 4px !important; padding-top: 2px !important; z-index: 10000 !important; ">
        <iframe style="display: block; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; background-position: initial initial; background-repeat: initial initial; " frameborder="0" width="728px" height="90px" src="javascript:(function(){return '<html><meta http-equiv=\'Content-Type\' content=\'text/html\' charset=\'UTF-8\'></meta><head><style> html { overflow:hidden; } body { background-color:transparent; float:left; padding:0; margin:0; overflow:hidden; height:90px;width:728px;} .contenido{margin:0}</style></head><body><div class=\'contenido\' id=\'banner\'><SCRIPT TYPE=\'text/javascript\' SRC=\'http://ad.yieldmanager.com/st?ad_type=ad&ad_size=728x90&section=2871061\'></SCRIPT></div></body></html>'})()"></iframe>
    </div>
    </div>
</div>

Я не хочу знать, когда нажал и применить CSS к родителю ".pread". Как я могу это сделать? 

<script>
        $(".postad").live('click', function(){
        alert("clicked");
            $(this).parent().css({
                'backgroundImage' : 'url(http://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/camera_test.png)',
                'backgroundColor' : 'limeGreen'
            });
        });
</script>

Но это не работает. Спасибо!

Ответы [ 3 ]

3 голосов
/ 27 марта 2012

Ваш код работает, если вы предоставляете какой-то фактический контент для поста div, отличного от iframe.Вы можете увидеть, как это работает здесь , если вы нажмете на xxx, который я добавил к этому разделу.

Это не сработает, если вы нажмете на iframe, и это потому, что клики непузыриться из iframe в родительские объекты, поэтому при щелчке в iframe событие click не поступает в postad div.Если вы щелкнете по iframe, этот щелчок останавливается.

Можно перехватить щелчок по iframe с родительской страницы, но для этого нужно поместить прозрачный div поверх верхней части iframe, чтобы родительская страницаполучает клик, а не фрейм.Вы можете увидеть работу идеи прозрачного div здесь: http://jsfiddle.net/jfriend00/h2WTB/ - просто нажмите на загружаемое изображение, и щелчок будет обработан прозрачным div, который появится в вашем обработчике событий postad.

0 голосов
/ 27 марта 2012

Попробуйте это 

<script>
$(document).ready(function(){
        $(".postad").click(function(){
        alert("clicked");
            $(this).parents('.pread').css({
                'backgroundImage' : 'url(http://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/camera_test.png)',
                'backgroundColor' : 'limeGreen'
            });
        });
});
</script>

Это должно хорошо работать:)

0 голосов
/ 27 марта 2012

Вы неправильно указали свои свойства CSS. Они дефисированы, а не верблюжьей. 

$(this).parent().css({
    'background-image' : 'url("http://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/camera_test.png")',
    'background-color' : 'limeGreen'
});
...