2016-12-29 2 views
0

Я хочу, чтобы заменить часть данного URL с помощью кнопки click.When я нажимаю кнопку воспроизведения нужно изменить autoplay=0 to autoplay=1 и При нажатии кнопки закрытия нужно изменить autoplay=1 to autoplay=0Измените строку запроса, используя регулярные выражения

jQuery(document).ready(function($) { 
 
    $('.playButton').click(function() { 
 
    alert('play'); 
 
    $("iframe").src = src.replace(/\&autoplay\=\d/, "&autoplay=" + 1); 
 
    }); 
 

 
    $(".close_icon").click(function() { 
 
    alert('close'); 
 
    $("iframe").src = src.replace(/\&autoplay\=\d/, "&autoplay=" + 0); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<iframe src="https://www.youtube.com/embed/C0DPdy98e4c?width=640&autoplay=1"></iframe> 
 
<div class="playButton">Play</div> 
 
<div class="close_icon">Close</div>

+1

Используйте 'Attr()', чтобы изменить 'src' атрибут фрейма. '$ ('iframe'). attr ('src', function (i, oldSrc) {return oldSrc.replace ('autoplay = 0', 'autoplay = 1');});' – Tushar

+0

@tushar ваше сообщение работает fine.Пожалуйста, отправьте его снова – user3386779

+1

Вот [полный код] (https://jsfiddle.net/tusharj/vqzkn1gp/) – Tushar

ответ

2

Для этого вам не нужен RegEx. Замена строк может быть выполнена.

$("iframe").src не устанавливает значение src атрибут iframe. Используйте attr(), чтобы изменить атрибут элемента.

jQuery(document).ready(function($) { 
 
    $('.playButton').click(function() { 
 
    $("iframe").attr('src', function(i, oldSrc) { 
 
     if (oldSrc.indexOf('autoplay') === -1) { 
 
     // If autoplay is not on URL, add it 
 
     oldSrc += '&autoplay=1'; 
 
     } 
 

 
     return oldSrc.replace('autoplay=0', 'autoplay=1'); 
 
    }); 
 
    }); 
 

 
    $(".close_icon").click(function() { 
 
    $("iframe").attr('src', function(i, oldSrc) { 
 
     return oldSrc.replace('autoplay=1', 'autoplay=0'); 
 
    }); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<iframe src="https://www.youtube.com/embed/C0DPdy98e4c?width=640"></iframe> 
 
<div class="playButton">Play</div> 
 
<div class="close_icon">Close</div>


Код может быть DRY'd как последуйте

jQuery(document).ready(function($) { 
    // To update the value of autoplay in the URL of iframe src attribute 
    var changeAutoplay = function(newValue) { 
     $('iframe').attr('src', function(i, oldSrc) { 
      return oldSrc.replace(/autoplay=\d/, 'autoplay=' + newValue); 
     }); 
    }; 

    $('.playButton').click(function() { 
     changeAutoplay(1); 
    }); 

    $(".close_icon").click(function() { 
     changeAutoplay(0); 
    }); 
}); 
+0

Мне нужно проверить, что автовоспроизведение находится в src, а затем добавить – user3386779

+0

@ user3386779 Чтобы проверить, существует ли строка в другой строке, вы можете использовать 'indexOf()'. В вашем случае вы также можете использовать '/autoplay=\d/.test (url)' – Tushar

+0

, пожалуйста, обновите свою скрипку, пожалуйста, – user3386779

1

Как вы можете видеть, есть ошибка с консоли Uncaught ReferenceError: src is not defined, что означает, что вы пытаетесь использовать несуществующую собственность, попробуйте:

$("iframe").attr("src", function(index, value){ return value.replace("autoplay=0", "autoplay=1") }) 

Подробнее о attr метод here.

Смежные вопросы