Сделайте действие, основанное на наличии атрибута ALT с Javascript

Question

У меня есть javascript, который смотрит на тело и находит слова, а если присутствует, он выводит div. Это полезно для многих вещей, однако ...

Что мне нужно сделать, так это посмотреть на тело и все теги ALT для страницы.

Я нашел это: Use javascript to hide element based on ALT TAG only? Что похоже на изменение атрибута ALT, однако я хочу выполнить действие.

Вот мой JS до сих пор.

var bodytext = $('body').text(); 
    if(bodytext.toLowerCase().indexOf('one' || 'two')==-1) 

return; 
    var elem = $("<div>Text Here</div>"); 

спасибо.

P.S. Я N00B/относительно новый в JS, я делаю это для небольшого проекта, поэтому я не уверен, с чего начать это с точки зрения JS-функций.

Answer 1

Обновленный ответ Попробуйте это, я прокомментировал код, чтобы немного его объяснить.

// 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'); 
} 

Answer 2

Вы используете JQuery LIB, вы можете выбрать элементы по атрибуту, как:

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

Если вы используете селектор $('[alt]') вы можете получить элементы, которые установили этот атрибут, а затем проверить значение элемента, если у вас есть более сложный выбор.

Чем вы должны изменить свое возвращение, так как вы не могли поместить div внутри тега ALT, это не сработало.

Речь идет о том, каков ваш ожидаемый результат.

UPDATE

---

Как вы хотите изменить все изображения и видео на странице, как сделать это с помощью 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 Extensions, я просто помещаю этот код здесь в jQ uery, поскольку вы использовали jQuery.

Конечно, это можно сделать, с большим количеством кода с простым javascript и DOM API.