使用多个 id 从可见元素中获取文本

Posted 2023-05-09

【中文标题】使用多个 id 从可见元素中获取文本

【英文标题】：Using multiple ids get text from element that is visible

【发布时间】：2018-04-25 14:48:02

【问题描述】：

我正在使用具有多个条件的 Angular js，所有条件都使用相同的 id。需要从条件为真的情况下获取文本。

我刚刚在即将发布的应用程序中发现了一个大错误。 我正在使用 angularjs/ionic vs 1 并在我的 html 中使用分配条件。 这些条件产生了很好的结果，并显示了我想要展示的内容。 但是，每当我保存信息时，它都会获取元素 id，每个条件都有相同的 id，而不是给我可见条件的文本，我得到所有这些。 我需要一种仅在可见的情况下才能获取 id 文本的方法。这曾经有效，除非在测试期间错过了这一点。 检查控制器中的 id。

 function JqliteIds(id) 
       // var myElement = angular.element( document.querySelector( '#some-id' ) );
        var p = angular.element(document.getElementById(id)).text().trim();
        p = p.replace(/(\r\n|\n|\r)/gm, " ");
        p = p.replace(/ +/g, ' ');
        return p;
        //stepTwoFormula = stepTwoFormula.replace(/(\r\n|\n|\r)/gm, " ");
        //stepTwoFormula = stepTwoFormula.replace(/ +/g, ' ');
    

具有多个条件的 html 表单。 id 是... id="stepOneFormula"

     <div class="item item-text-wrap">
        <div ng-if="level.light">
            <div ng-show="level.stepOne.bleachAdditiveType < 0">
                <p id="stepOneFormula">
                    Mix config.productTypes[level.stepOne.productType] with
                    <span ng-if="level.stepOne.productType === 1 || level.stepOne.productType === 2">
                        the manufacturer suggested developer or
                    </span> level.stepOne.peroxideVolume volume / level.stepOne.peroxidePercentage percent peroxide until it is the consistency of mayonnaise.
                </p>
            </div>

            <div ng-show="level.stepOne.bleachAdditiveType > -1">
                <p id="stepOneFormula">
                    Add approximately config.partsInches[level.stepOne.bleachInches] of
                    config.productTypes[level.stepOne.bleachAdditiveType] to config.productTypes[level.stepOne.productType]. Mix with
                    <span ng-if="level.stepOne.productType === 1 || level.stepOne.productType === 2">
                        the manufacturer suggested developer or
                    </span> level.stepOne.peroxideVolume volume / level.stepOne.peroxidePercentage percent peroxide until it is the consistency of mayonnaise.
                </p>
            </div>
        </div>
        <div ng-if="!level.light">
            <p>
                <!--Going Red-->
                <div ng-show="level.stepOne.redRootsTonePercentOne > -1">
                    <div id="stepOneFormula" ng-include="'app/formula-result/service-types/double-process/red-rootsDbl1.html'"></div>
                </div>
                <!--Mixed Levels of gray-->
                <div ng-show="level.stepOne.grayTonePercentFour > -1">
                    <div id="stepOneFormula" ng-include="'app/formula-result/service-types/double-process/gray-mixedDbl1.html'" data="level.stepOne"></div>
                </div>
                <!--Regular Levels-->
                <div ng-show="level.stepOne.grayTonePercentFour === -1 && level.stepOne.redRootsTonePercentOne === -1">
                    <div id="stepOneFormula" ng-include="'app/formula-result/service-types/double-process/genericDbl1.html'"></div>
                </div>
            </p>
        </div>
    </div>

【问题讨论】：

id 值在文档（页面）中必须是唯一的。如果两个元素具有相同的 id 值，则就像您和其他人拥有相同的驾驶执照号码一样。

Check if element is visible in DOM的可能重复

【参考方案1】：

我一发布这个问题，就开始阅读 ng-show, ng-if 并将我的 ng-shows 更改为 ng-if... 它有效。 https://docs.angularjs.org/api/ng/directive/ngIf

不需要检查元素是否可见。与 ng-show 不同，ngIf 指令删除或重新创建元素。因此，如果没有创建它，它就不存在，所以 id 是无关紧要的。