Question

我有这样的div结构。

<div id="comparison_widgets" class="ui-widget row-fluid">
    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="widget_0">
        <div class="portlet-header ui-corner-all">China</div>
            <div class="portlet-content" id="id_0" data-highcharts-chart="3">
            </div>
        </div>
    </div>

    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="widget_1">
        <div class="portlet-header ui-corner-all">India</div>
            <div class="portlet-content" id="id_1" data-highcharts-chart="3">
            </div>
        </div>
    </div>

    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="widget_2">
        <div class="portlet-header ui-corner-all">US</div>
            <div class="portlet-content" id="id_2" data-highcharts-chart="3">
            </div>
        </div>
    </div>
</div>

每个类portlet-content的div都包含一个饼图。因此，现在当我点击任何饼图时，其各自的portlet-header div内容应更改为XYZ。例如： - 如果我点击中国图表，其名称应更改为XYZ。

目前我正在这样做$(".portlet-header").text("XYZ");，它会更改所有portlet-header内容。我该如何正确地做到这一点？

Answer 1

$('.portlet-content').click(function(){
    $(this).closest(".portlet-header").text("XYZ");
});

Answer 2

$(".portlet-content").on("click",function() {
  $(this).prev().text("XYZ");
});

更改div内容onclick

2 个答案: