javascript - 更改div内容onclick

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").on("click",function() {
  $(this).prev().text("XYZ");
});