Ориентация динамических идентификаторов в jQuery

Question

Я создаю динамический идентификатор внутри элемента li, и я хочу настроить таргетинг на каждый ID, чтобы я мог анимировать непрозрачность. Я установил переменную «_Btn», чтобы консольно зарегистрировать значение каждого идентификатора, который возвращает правильные имена имен, но когда я пытаюсь настроить таргетинг на ID в jquery, он не оживляет непрозрачность. Что я делаю неправильно, как настроить таргетинг на каждый ID в jquery?

var btnInfo = [{ 
    img: 'images/thumbs/motionGraphicsThumb1.jpg', 
    id: 'btn1', 
    title: 'TITLE1', 
    url: 'folio/pg1.html' 
}, { 
    img: 'images/thumbs/motionGraphicsThumb2.jpg', 
    id: 'btn2', 
    title: 'TITLE2', 
    url: 'folio/pg2.html' 
}, { 
    img: 'images/thumbs/motionGraphicsThumb3.jpg', 
    id: 'btn3', 
    title: 'TITLE3', 
    url: 'folio/pg3.html' 
}] 
for (var i = 0; i < btnInfo.length; i++) { 

    $('.thumbWrapper .container ul').append('<li class="hideThumbs" id="' + btnInfo[i].id + ' " onclick="contentLoader(\'' + btnInfo[i].url + '\')"><div class="view view-tenth"><img src="' + btnInfo[i].img + '"><div class="mask"><h2>' + btnInfo[i].title + '</h2></div></div></li>'); 

    var _btn = btnInfo[i].id; 
    console.log("BTN ID " + _btn); 

    $("#" + _btn).animate({ 
    opacity: 100 
    }); 
} 
} 

Answer 1

Я предполагаю, что вы создаете <li> s не виден, то нужно использовать animate(), чтобы сделать их видимыми гладко. Так что более вероятно, что ваш класс hideThumbs установлен в display: none;: таким образом, изменение opacity не имеет эффекта, и элемент остается невидимым.

Вместо ваш CSS должен быть:

.hideThumbs { 
    opacity: 0; 
} 

Помимо вышесказанного, отметим, что:

• opacity: 100 не имеет смысла (хотя она будет работать); значения находятся между 0 (невидимыми) и 1 (полностью видимыми).
• Вам лучше написать var _btn = btnInfo[i].id; до создания <li>, так что вы можете использовать btn, а не btnInfo[i].id внутри него.