передавая значение переменной в JQuery

Question

Я написал код в JQuery следующим

$(document).ready(function() { 
 
    $("li").click(function() { 
 
    var str = $(this).index(); 
 
    alert(str); 
 
    $("#headdiv div:nth-child(" + str + ")").addClass("product-active"); 
 

 
    }); 
 
});

Я хочу, чтобы передать значение, сохраненное в переменной ул как п-м порядковым номером ребенка. Где я делаю неправильно?

Answer 1

str увеличиваем переменную с 1 каждый раз нажать кнопку. См рабочий фрагмент кода ниже:

$(document).ready(function() { 
 
    $("li").click(function() { 
 
    var str = $(this).index(); 
 
    str++; 
 
    //console.log(str); 
 
    $("#headdiv div:nth-child(" + str + ")").addClass("product-active"); 
 

 
    }); 
 
});

.product-active{ 
 
    color: #F00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>List element</li> 
 
    <li>List element</li> 
 
    <li>List element</li> 
 
    <li>List element</li> 
 
    <li>List element</li> 
 
</ul> 
 
<div id="headdiv"> 
 
    <div>some div</div> 
 
    <div>some div</div> 
 
    <div>some div</div> 
 
    <div>some div</div> 
 
    <div>some div</div> 
 
</div>

Answer 2

Мы создаем переменную и добавляем текст со значением str, а затем используем эту строку в jQuery.

$(document).ready(function() { 
     $("li").click(function() { 
     var str = $(this).index(); 
     alert(str); 
     //Create a new variable 
     var buildStr = "#headdiv div:nth-child(" + str + ")"; 
     $(buildStr).addClass("product-active"); 

     }); 
    }); 

Answer 3

Вы должны добавить str++.

Поскольку ключевое слово str создает новую переменную каждый раз в каждом вашем загружении, глобальная переменная str не обновляется/увеличивается.

$(document).ready(function() { 
 
    $("li").click(function() { 
 
    var str = $(this).index(); 
 
    str++; 
 
    $("#headdiv div:nth-child(" + str + ")").addClass("product-active"); 
 

 
    }); 
 
});

.product-active { \t 
 
\t background-color: green !important; 
 
} 
 
.not-active{ 
 
    background-color: red; 
 
    height: 50px; 
 
    margin-right: 5px; 
 
    width: 50px; 
 
    border-radius: 50%; 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>Click Me</li> 
 
    <li>Click Me</li> 
 
    <li>Click Me</li> 
 
</ul> 
 
<div id="headdiv"> 
 
    <div class="not-active"></div> 
 
    <div class="not-active"></div> 
 
    <div class="not-active"></div> 
 
</div>