Question

我有9张幻灯片是由jquery创建的。第一张幻灯片是1/9，第二张是2/9，依此类推......

我只需要更改每张幻灯片中更改的数字的颜色。我想过为这个元素添加一个类。

我的HTML：

<section class="projects" id="project-1">

  <div class="top-bg">

    <div class="top-header">
      <span class="numbers"></span>
      <h1>Reel 18bis</h1>
    </div>

  </div>

和我的jQuery：

var total = $('.numbers');
    var projects = $('.projects');
    var updateNumbers = function () {
        var currentProjectId = $('.projects.active').attr('id');
        total.html(currentProjectId.replace(/project\-/, '') + '/' + projects.length);
    };

有人可以帮忙吗？

Answer 1

我把一个快速小提琴放在一起，展示如何使用事件和eventArg.targets属性作为相对论点。

我还纠正了项目显示1/2 1/2的简单for循环，它遍历项目属性。

http://jsfiddle.net/tpgz7/4/

的Javascript

(function(window) {
window.ProjectBoard = {
'projects': null,
'total': null,
'updateNumbers': function () {
    for (i=0;i < ProjectBoard.projects.length; i++) {            
        var projID = ProjectBoard.projects[i].getAttribute('id').replace("project\-", "");
        ProjectBoard.total[i].innerHTML ="<span class='number-count'>" + projID + "</span><span class='number-separator'>/</span><span class='number-total'>" + ProjectBoard.total.length + "</span>";           
    }
},
'init': function () {
    ProjectBoard.projects = $('section.projects');
    ProjectBoard.total = $('section.projects span.numbers');
    ProjectBoard.updateNumbers();
    for (i=0;i < ProjectBoard.projects.length; i++) {            
        var projID = ProjectBoard.projects[i].getAttribute('id').replace("project\-", "");
        ProjectBoard.total[i].innerHTML = "<span class='number-count'>" + projID + "</span><span class='number-separator'>/</span><span class='number-total'>" + ProjectBoard.total.length + "</span>";
        /* Attach Event Handlers*/
        ProjectBoard.projects[i].addEventListener('click', function(ev){
            var targetSelector = ev.target.id || ev.target.parentElement.id || ev.target.parentElement.parentElement.id || ev.target.parentElement.parentElement.parentElement.id;            
            $('.active').toggleClass('active');
            $('#'+targetSelector).addClass('active');
        }, false);
    }
}    
};
}(window,document));

ProjectBoard.init(window);

请注意，'init'方法中对jQuery选择器的依赖性很小（且不必要）。 querySelectorAll（“。projects”）在这里也可以工作。还有一个$（）。css赋值方法，可以用$ element $ .style.color =％value％替换。

HTML

<section class="projects active" id="project-1">
    <div class="top-bg">
        <div class="top-header"> <span class="numbers"></span>
            <h1>Reel 18bis</h1>
        </div>
    </div>
</section>
<section class="projects" id="project-2">
    <div class="top-bg">
        <div class="top-header"> <span class="numbers"></span>
            <h1>Reel 18bis</h1>
        </div>
    </div>
</section>
<section class="projects" id="project-3">
    <div class="top-bg">
        <div class="top-header"> <span class="numbers"></span>
             <h1>Reel 18bis</h1>
        </div>
    </div>
</section>
<section class="projects" id="project-4">
    <div class="top-bg">
        <div class="top-header"> <span class="numbers"></span>
             <h1>Reel 18bis</h1>
        </div>
    </div>
</section>

CSS

section.projects 
{
    border:0.2em solid black;
    margin-bottom:0.2em;
    position:relative;
    display:block;
    padding:1.2em;
}

section.projects span.numbers 
{
    position:absolute;right:-0.2em;
    padding:0.35em;
    display:block;
    top:-0.2em;
    color:#202020;
    background-color:whitesmoke;
    border:0.2em solid silver;
    font-weight:700;
}

body section.projects.active span.numbers 
{
    color: black;
    backround-color:gray;
    top:-0.2em;right:-0.2em;
    border:0.2em solid black;
}

 body section.projects.active span.numbers span.number-count
{
    font-size: 2em;
    color: lime;
}

将类添加到jquery添加的数字

1 个答案:

的Javascript

HTML

CSS