Web共享api javascript函数中的foreach值传递重复

Posted 2023-03-31

【中文标题】Web共享api javascript函数中的foreach值传递重复

【英文标题】：foreach value passing duplication in web share api javascript function

【发布时间】：2020-10-15 17:27:53

【问题描述】：

我正在尝试分享特定产品的链接。 在 foreach 循环中，我正在调用用户的产品，以便他们可以通过按共享来共享它。 API 正在运行。

但是，每个按钮都通过第一个 id 存在重复，我没有任何解决方案... 从 2 天开始尝试不同的事情，但一切都在脉络中...... 请指导我解决方案谢谢....

这是按钮代码

@foreach($sellers as $reports)
    <input id="myInput"  type="button" data-name="$reports['title']" data-id="$reports['id']" value="$reports['id']" onclick="addRow(this)">
@endforeach

这里是js函数

    @push('myjs')
    <script>
        function addRow(ele)
        
            var name= $(ele).attr('data-name');
            var id= $(ele).attr('data-id');

            var text = "http://127.0.0.1:8000/scan-s-report/"+ id +"/landing-page";
            var subject = "Report link for"+ name ;

            console.log(subject);
            $(document).on('click', () => 
                if (navigator.share !== undefined) 
                    navigator.share(
                        // console.log('I m if');
                        text: text,
                        // title: 'Web Share API Draft',
                        // url: 'https://wicg.github.io/web-share/#share-method',
                    )
                        .then(() => console.log('Successful share'))
                        .catch((error) => console.log('Error sharing', error));
                
                // else 
                //     // console.log('I m else');
                //      window.location = 'mailto:?subject=Report link for + name +&body=http://127.0.0.1:8000/scan-sm-report/+ id +/landing-page';
                // 
            );

        
    </script>
@endpush

@阿努拉德

【问题讨论】：

您是否检查过按钮生成的 html 具有唯一的 data-id ？另外，id 有什么？

是的，他们有唯一的 ID

并且 id 具有数据库中一行的 id

有些事情我觉得很奇怪：您为每个输入设置相同的 id，然后单击整个文档进行注册。通常，您会在单击 $(input[type=button]).on('click') 之类的按钮时进行注册。然后你可以通过 $(this).data('name')

获取函数内部的数据

如果你使用 onclick="addRow()" 那么我认为你不需要 $().on('click', ...)。他们在做同样的事情。我认为您可以将 () => ... 中的代码移出，祝您好运。

【参考方案1】：

如果你使用 onclick="addRow()" 那么我认为你不需要 $().on('click', ...)。他们在做同样的事情。我认为您可以将 () => ... 中的代码移出祝你好运 @阿努拉德 这对我有用，现在它就像一个魅力：D

@push('myjs')
    <script>
        function addRow(ele)
        
            var name= $(ele).attr('data-name');
            var id= $(ele).attr('data-id');

            var text = "http://127.0.0.1:8000/scan-s-report/"+ id +"/landing-page";
            var subject = "Report link for"+ name ;

            console.log(subject);

        // $('input[type=button]').on('click', () => 
                if (navigator.share !== undefined) 
                    navigator.share(
                        // console.log('I m if');
                        text: text,
                        // title: 'Web Share API Draft',
                        // url: 'https://wicg.github.io/web-share/#share-method',
                    )
                        .then(() => console.log('Successful share'))
                        .catch((error) => console.log('Error sharing', error));
                
                // else 
                //     // console.log('I m else');
                //      window.location = 'mailto:?subject=Report link for + name +&body=http://127.0.0.1:8000/scan-sm-report/+ id +/landing-page';
                // 
            // );

        
    </script>
@endpush

【讨论】：

很高兴能帮上忙！