如何覆盖 jquery 添加的内联 css 样式属性

Question

我正在使用 Kendo UI 选项卡，因此一旦选项卡到达最后一个 li 列表，右导航箭头就会被隐藏或使用 jquery 添加 display none 内联 CSS 所以我想覆盖 display none 以显示块！重要并添加 opacity 0.4 时div 有 display none 属性。

https://dojo.telerik.com/@vishal14/UcaPEYoh

我尝试使用 if 语句，但它不起作用

<script>
                $(document).ready(function () {
                    $("#tabstrip").kendoTabStrip();
  
                    if($('.k-button').is(':visible')){
                        $(this).css("opacity","0.2");    
                    }else{
                        $(this).css("opacity","1");  
             
                }
                });
            </script>

Answer 1

您的代码if($('.k-button').is(':visible')) 不起作用，因为左右按钮是动态添加的。

对于右键，试试这个代码：

$(document).ready(function () {
            $("#tabstrip").kendoTabStrip();
            setInterval(function () {
                var el = $('.k-tabstrip-next');

                if (el.css('display') == 'none') {
                    el.css("opacity", "0.2").css('display', '');
                    el.attr('data-el', 'stop');
                }
                else if (el.attr('data-el') != 'stop')
                    el.css("opacity", "1");
            }, 200);

            $(document).on('click', '.k-tabstrip-prev', function () {
                $('.k-tabstrip-next').attr('data-el', '');
            });
        });

如果你想让两个按钮都可见，你可以试试这个：

$(document).ready(function () {
            $("#tabstrip").kendoTabStrip();
            setInterval(function () {
                var ne = $('.k-tabstrip-next');
                var pr = $('.k-tabstrip-prev');

                if (ne.css('display') == 'none') {
                    ne.css("opacity", "0.2").css('display', '');
                    ne.attr('data-el', 'stop');
                }
                else if (ne.attr('data-el') != 'stop')
                    ne.css("opacity", "1");

                if (pr.css('display') == 'none') {
                    pr.css("opacity", "0.2").css('display', '');
                    pr.attr('data-el', 'stop');
                }
                else if (pr.attr('data-el') != 'stop')
                    pr.css("opacity", "1");


            }, 200);


            $(document).on('click', '.k-tabstrip-prev', function () {
                $('.k-tabstrip-next').attr('data-el', '');
            });


            $(document).on('click', '.k-tabstrip-next', function () {
                $('.k-tabstrip-prev').attr('data-el', '');
            });
        });