Question

我有一些javascript查看正文并找到单词，如果有一个，它会输出一个div。这对许多事情很有用，但是......

我需要做的还是查看页面的正文和所有ALT标记。

我发现了这个：Use javascript to hide element based on ALT TAG only? 这似乎改变了ALT属性，但我想执行一个动作。

到目前为止，这是我的JS。

MySQL

谢谢。

P.S。我是一个N00B /相对较新的JS，我正在为一个小项目做这个，所以我不知道从JS函数的角度来看这个。

Answer 1

您正在使用jQuery lib，您可以按属性选择元素，如：

   $('[alt="one"]').each(function(el){
        // do something
        var x = $(el).arrt('alt');
    });

如果使用选择器$('[alt]')，则可以获取具有此属性集的元素，然后在选择更复杂的情况下检查元素的值。

你不得不改变你的回报，因为你不能把一个div放在一个ALT标签内，它没有用。

以下是您的预期产量。

更新

如果您想更改页面中的所有图片和视频，使用jquery执行此操作的方法是$.replaceWith()：

$('img,video').replaceWith($('<div>Text Here</div>'));

如果您需要过滤元素：

$('img,video').each(function(el){
    if($(el).prop('tagName') == 'IMG' &&
       $(el).attr('alt') == 'the text...') {
           $(el).replaceWith($('<div>Text Here</div>'));
       }
})

但我不是Chrome扩展程序方面的专家，我只是将此代码放在jQuery中，就像使用jQuery一样。

当然可以用普通的javascript和DOM API来完成很多代码。

Answer 2

更新了答案 试试这个，我评论了代码来解释一下。

// build array of triggers
var triggers = ['trigger1','trigger2','trigger3'];

// wait for page to load
$(function() {

    // show loading overlay
    $('body').append('<div id="mypluginname-overlay" style="height:100%;width:100%;background-color:#FFF;"></div>');

    // check page title
    var $title = $('head title');
    for(trigger of triggers) {
        if($($title).innerHTML.toLowerCase().indexOf(trigger) >= 0) {
            $($title).innerHTML = '*censored*'; 
        }
    }

    // check all meta
    $('meta').each(function() {
        var $meta = $(this);
        for(trigger of triggers) {
            if($($meta).attr('name').toLowerCase().indexOf(trigger) >= 0) {
                censorPage();
                return; //stop script if entire page must be censored
            } else if($($meta).attr('content').toLowerCase().indexOf(trigger) >= 0) {
                censorPage();
                return; //stop script if entire page must be censored
            }
        }
    });

    // check all img
    $('img').each(function() {
        var $img = $(this);
        for(trigger of triggers) {
            if($($img).attr('alt').toLowerCase().indexOf(trigger) >= 0) {
                censor($img);
            }
        }
    });

    // check all video
    $('video').each(function() {
        var $video = $(this);
        for(trigger of triggers) {
            if($($video).attr('alt').toLowerCase().indexOf(trigger) >= 0) {
                censor($video);
            }
        }
    });

    // if you want to be extra careful and check things like background image name,
    // you'll have to run this code here - very inefficent
    // but necessary if you want to check every single element's background image name:
    for($element of $('body').children()) {
        for(trigger of triggers) {
            if($($element).css('background-image').toLowerCase().indexOf(trigger) >= 0) {
                $($element).css('background-image','');
            }
        }   
    }

, function() { // Not sure if this is totally correct syntax, but use a callback function to determine when
               // when the rest of the script has finished running
        // hide overlay
        $('#mypluginname-overlay').fadeOut(500);
    }});

function censor($element) {
    // just a basic example, you'll probably want to make this more complex to overlay it properly
    $element.innerHTML = 'new content';
}

function censorPage() {
    // just a basic example, you'll probably want to make this more complex to overlay it properly
    $('body').innerHTML = 'new content';
}

---原始答案--- 我不确定你想在这里做什么，你应该添加更多细节。但是，如果你选择使用jQuery，它提供了大量有用的方法，包括方法.attr（），它可以让你获得任何元素的任何属性的值。

示例：

var alt = $('#my-selector').attr('alt');
if (alt == 'whatYouWant') {
  alert('yay');
} else {
  alert('nay');
}

使用Javascript基于ALT属性的存在执行操作

2 个答案: