CODEWITHSUNDEEP
javascriptjquery
KasiaW
KasiaW

Reputation: 55

Targeting dynamically added id with JavaScript

I am creating a Wordpress website. I am displaying posts with a query. This is the output HTML:

<div class="row no-gutters przewodnik-wstep kroki-border row-change-background">
    <div class="col-xl-1 jasne-tlo">
    </div> 
    <div class="col-xl-4 przewodnik-tytul green-background obszar-change-background">
        <h3 class="krok text-center materialy-tytul"><?php the_field('nazwa_obszaru_na_stronie_kroku') ?></h3>
    </div>
    <div class="col-xl-6 jasne-tlo przewodnik-tekst krok-1">
        <div class="opis-kroku">
        <?php the_field('zajawka_na_stronie_kroku'); ?>
        </div>
        <a href="<?php echo esc_url(get_field('link_na_stronie_kroku')); ?>"><button class="button-dark czytaj-dalej change-background"><?php the_field('przycisk_na_stronie_kroku'); ?></button></a>
    </div>
    <div class="col-xl-1 jasne-tlo">
    </div>
    </div>

What I need to acheve is that

<div class="col-xl-4 przewodnik-tytul green-background obszar-change-background">

changes background (from background-color to background-image) when <button class="button-dark czytaj-dalej change-background"> is hovered.

I have managed to add id, to <div class="row no-gutters przewodnik-wstep kroki-border row-change-background"> to be able to target div and button but I don't know how to use it in getElementsByClassName(). My JS code:

$(".row-change-background").each(function(i) {
  $(this).attr("id", "row-change-background" + i);
});

  $(".row-change-background button").hover(function(){
    $(".row-change-background .obszar-change-background").css("background-image", "url(../wp-content/themes/twentytwenty-child/img/KDK_MARBLING_TLO1.png)");
    $(".row-change-background .obszar-change-background").css("background-size", "cover");
    $(".row-change-background .obszar-change-background").css("background-repeat", "no-repeat");        
    }, function(){
    $(".row-change-background .obszar-change-background").css("background-color", "#c6e4cc");
    $(".row-change-background .obszar-change-background").css("background-image", "none");  
  });

Obviously now all <div class="col-xl-4 przewodnik-tytul green-background obszar-change-background"> are changing background at the same time on hover.

Upvotes: 0

Views: 47

Answers (1)

Sharon Choong
Sharon Choong

Reputation: 596

Use this to get the hovered element specifically, then closest to get the parent row .row-change-background, then find to get the div .obszar-change-background.

  $(".row-change-background button").hover(function(){
    var selected = $(this).closest(".row-change-background").find(".obszar-change-background");
    selected.css("background-image", "url(../wp-content/themes/twentytwenty-child/img/KDK_MARBLING_TLO1.png)");
    selected.css("background-size", "cover");
    selected.css("background-repeat", "no-repeat");        
    }, function(){
    var selected = $(this).closest(".row-change-background").find(".obszar-change-background");
    selected.css("background-color", "#c6e4cc");
    selected.css("background-image", "none");  
  });

Upvotes: 1

Related Questions