Question

我是一个jQuery新手，我正试图移植a script

它显示相同数据的饼图图像（初始类：“主要”）和条形图图像（初始类：“次要”，不可见），查看者可以单击图表在饼图和条形图之间切换：

<style>
        img.primary   {
                display: inline;
                cursor: pointer;
        }
        img.secondary {
                display: none;
        }
        p.chart:hover, img.secondary {
                display: inline;
                cursor: pointer;
        }
        p.chart:hover, img.primary {
                display: none;
        }
</style>

<script type="text/javascript" src="jquery-144.js">
</script>

<script type="text/javascript">

$(function() {
        // remove the "chart" class when the page loads,
        // to disable hover for JavaScript-enabled users
        $("p.chart").removeClass("chart");

        // XXX add a click-handler for P.chart here?
});

// XXX how to rewrite this in jQuery?
function swapImages(container) {
        for (var child in container.childNodes) {
                child = container.childNodes[child];
                if(child.nodeName == "IMG")
                        child.className = (child.className == "primary" ? "secondary" : "primary");
        }
}
</script>

以下是网页的摘录：

<p class="chart" onclick="swapImages(this);">
<img class="primary" width=700 height=280 src="pie.png">
<img class="secondary" width=700 height=280 src="bar.png">
</p>

（注：the "p.chart" class is removed on load so that the charts flip between pie and bar on mouse-hover only for JavaScript disabled users）

但我的实际问题是如何将swapImages（）函数从纯JavaScript重写为jQuery。我可能应该致电：

$('p.chart').click(function(e) {
      ....
}

并在那里调用 addClass（“primary”）或 removeClass（“secondary”），但我对如何通过所有IMG孩子感到遗憾那个P.chart。

我是否需要拨打 $（'p.chart'）。点击（....）或 $（'p.chart'）。each（）。click （....）？

或者我可能不再需要p.chart，只需将点击处理程序直接分配给图像？

谢谢！亚历

Answer 1

你可以这样做：

    $(function(){
      $('p.chart').removeClass(chart);
      $('p:has(img)').click(function(e){
        $("img", this).toggleClass("primary").toggleClass("secondary");
    });
   });

如果有两张图片，并且您需要在每次点击时切换图像，您只需使用切换功能：

 $(function(){
      $('p.chart').removeClass(chart);
      $('p:has(img)').click(function(e){
         $("img", this).toggle();
        });
   });

编辑：根据OP的评论更新帖子。

jQuery：将addClass（）或removeClass（）应用于P的IMG子节点

1 个答案: