gpt4 book ai didi

javascript - 单击匹配链接时切换单个 div 的属性

转载 作者:行者123 更新时间:2023-11-30 19:38:35 25 4
gpt4 key购买 nike

完整代码在这里:https://plnkr.co/edit/6TTLVcsXLV7C1qXSMQV0?p=preview

我这里有一个 Angular ui bootstrap Accordion (每个重复的面板都有一个嵌套的 Accordion ):

<uib-accordion close-others="oneAtATime">
<div ng-repeat="sub in subdivisions">
<div uib-accordion-group id="accordion" is-open="status.open"
class="outercontent" ng-repeat="prov in sub.province"
heading="{{prov.name}}">

<!-- INNER ACCORDION -->
<uib-accordion close-others="oneAtATime">
<div uib-accordion-group id="inner-accordion" class="innercontent"
ng-repeat="dist in sub.district" heading="{{dist.name}}" >
<!-- ul of communes -->
</div>
</uib-accordion>

</div>
</div>
</uib-accordion>

我在这里有一组关于 svg 元素的链接:

<svg height="300" width="425" id="svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

<g id="adrargroup" >
<a ng-click="clickOuter($event);" class="svgcircle big"><circle cx="50" cy="50" r="40" id="adrarouter" class="circle"/></a>
<a ng-click="clickInner($event)" class="svgcircle small" id="adrarinner"><circle cx="50" cy="100" r="10" /></a>
<a ng-click="click($event)" class="svgcircle small" id="boudainner"><circle cx="50" cy="150" r="10" /></a>
<a ng-click="click($event)" class="svgcircle small" id="ouledahmedtimmiinner"> <circle cx="50" cy="200" r="10" /></a>
</g>
<g id="algiersgroup" >
<a ng-click="clickOuter($event)" class="svgcircle big"><circle cx="150" cy="50" r="40" id="algiersouter" class="circle"/></a>
<a ng-click="clickInner($event)" class="svgcircle small" id="babelouedinner"><circle cx="150" cy="100" r="10" /></a>
<a ng-click="clickInner($event)" class="svgcircle small" id="barakiinner"><circle cx="150" cy="150" r="10" /></a>
<a ng-click="clickInner($event)" class="svgcircle small" id="birmouradraisinner"><circle cx="150" cy="200" r="10" /></a>
</g>
<g id="aindeflagroup" >
<a ng-click="clickOuter($event)" class="svgcircle big" ><circle cx="250" cy="50" r="40" class="circle" id="aindeflaouter" /></a>
<a ng-click="clickInner($event)" class="svgcircle small" id="aindeflainner"><circle cx="250" cy="100" r="10" /></a>
<a ng-click="clickInner($event)" class="svgcircle small" id="ainlechiakhinner"><circle cx="250" cy="150" r="10" /></a>
<a ng-click="clickInner($event)" class="svgcircle small" id="bathiainner"><circle cx="250" cy="200" r="10" /></a>
</g>
<g id="chlefgroup" >
<a ng-click="clickOuter($event)" class="svgcircle big" ><circle cx="350" cy="50" r="40" id="chlefouter" class="circle"/></a>
<a ng-click="clickInner($event)" class="svgcircle small" id="abouelhassaninner"><circle cx="350" cy="100" r="10" /></a>
<a ng-click="clickInner($event)" class="svgcircle small" id="ainmeraneinner"><circle cx="350" cy="150" r="10" /></a>
<a ng-click="clickInner($event)" class="svgcircle small" id="benihaouainner"><circle cx="350" cy="200" r="10" /></a>
</g>

</svg>

我想要实现的是,当单击每个链接时, Accordion 中目标链接的匹配 div 将打开。

我试图通过在点击时触发此功能来做到这一点:

$scope.clickOuter = function(e) {

var targetcircle = e.target;

for(i=0; i<circle.length; i++) {
circle[i].classList.remove("fff-onfocus");
}
targetcircle.classList.toggle("fff-onfocus");

var targetcontent = document.querySelectorAll('.' + targetcircle.getAttribute("id"));
targetcontent = Array.prototype.slice.call(targetcontent);

for(i=0; i<targetcontent.length; i++) {
targetcontent[i].setAttribute("is-open", "!status.open");
}

};

这部分功能:

var targetcontent = document.querySelectorAll('.' + targetcircle.getAttribute("id")); 
targetcontent = Array.prototype.slice.call(targetcontent);

for(i=0; i<targetcontent.length; i++) {
targetcontent[i].setAttribute("is-open", "!status.open");
}

获取目标圈子的 id 并检索匹配的 div。然后它会将 is-open(默认值 = false)属性的值更改为 !status.open (true)。但是,当我测试它时,它并不能完全工作。我单击链接,它返回匹配的 div 并更改 is-open 属性的值,但 Accordion 中没有真正打开或关闭的 div。

(在这个 https://plnkr.co/edit/M6ZjYSlzgmDQYXFzOurD?p=preview plunker 示例中,可以通过使 status.open 为真来切换最后一个面板)

我的第二个问题是这部分:

for(i=0; i<circle.length; i++) {
circle[i].classList.remove("fff-onfocus");
}
targetcircle.classList.toggle("fff-onfocus");

在单击另一个圆圈时从一个圆圈中删除该类,但不会让您在再次单击时切换所选的圆圈。

所以 2 个问题:

  1. 当点击匹配的链接/圆圈时,目标 div 不会打开/关闭。
  2. fff-onfocus 类没有被切换。

如有任何帮助,我们将不胜感激。谢谢。

编辑尝试过这个但仍然无法正常工作:

$scope.state = {};
$scope.state.isclosed = false;
$scope.state.isopen = true;

div 属性:is-open="state.isclosed",内部函数:targetcontent[i].setAttribute("is-open", "state.isopen");

最佳答案

这花了一些时间,但我能够让它以 AngularJS 的方式工作,而不是你正在尝试的 hack (^_^)

Take a look at this plunkr

    <svg height="300" width="425" id="svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

<g id="adrargroup-{{$index}}" ng-repeat="sub in subdivisions">
<a ng-click="clickOuter(prov);" ng-repeat="prov in sub.province" class="svgcircle big">
<circle ng-attr-cx="{{prov.cx}}" ng-attr-cy="{{prov.cy}}" r="40" class="circle"/>
</a>
<a ng-repeat="dist in sub.district" ng-click="clickInner(dist)" class="svgcircle small" >
<circle ng-attr-cx="{{dist.cx}}" ng-attr-cy="{{dist.cy}}" r="10" class="circle"/>
</a>
</g>
</svg>

我修改了 $scope.subdivisions 如下:

{
province: [{
name: 'Adrar',
namealt: 'adrarouter',
population: '123',
open: false,
cx: 50,
cy: 50
}],
district: [{
name: 'Adrar',
namealt: 'adrarinner',
population: '1234',
open: false,
cx: 50,
cy: 100
},
{
name: 'Bouda',
namealt: 'boudainner',
population: '1234',
open: false,
cx: 50,
cy: 150
},
{
name: 'Ouled Ahmed Timmi',
namealt: 'ouledahmedtimmiinner',
population: '1234',
open: false,
cx: 50,
cy: 200
}
]
}

接下来需要做什么:

  1. 编写一个函数,为每个对象分配opencxcy
  2. 您需要改进以下逻辑以适应 province 数组,而不是我如何快速修复 $scope.subdivisions[index].province[0]<
    $scope.clickOuter = function(e) {
var index = $scope.subdivisions.findIndex(function(obj){
return obj.province[0].name === e.name;
})
$scope.subdivisions[index].province[0].open = !$scope.subdivisions[index].province[0].open;
};
  1. $scope.clickInner = function(e) {};中编写类似的逻辑

关于javascript - 单击匹配链接时切换单个 div 的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55674832/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com