Question

此HTML通过按下按钮使站点背景改变颜色，并通过按图像更改背景图像。但我不知道如何制作文字链接而不是图像会改变背景图像。

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
 body{
   background: no-repeat;
 }

  </style>
  <meta charset="utf-8">
  <script>
     function change_color(obj)
     {
       obj.value && (document.body.style.backgroundColor = obj.value);
       obj.src && (document.body.style.backgroundImage = 'url('+obj.src+')');
     }
  </script>
</head>

<body>
<form method="post" action="1.php" onsubmit="return false">
	<button class="color" id="red" name="button" value="red" onclick='change_color(this)'>red</button>
	<button class="color" id="orange" name="button" value="orange" onclick='change_color(this)'>orange</button>
    <img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="" onclick='change_color(this)'>
    <img src="http://javascript.ru/forum/images/smilies/victory.gif" alt="" onclick='change_color(this)'>
</form>

</body>

</html>

Answer 1

由于您在问题中标记了jQuery，因此这里的jQuery等同于您的代码：

add_filter( 'woocommerce_default_address_fields' , 'custom_override_default_address_fields', 20, 1 );
// Our hooked in function - $address_fields is passed via the filter!
function custom_override_default_address_fields( $address_fields) {
    unset($address_fields['company']);
    unset($address_fields['address_2']);
    unset($address_fields['country']);
    unset($address_fields['state']);
    unset($address_fields['postcode']);
    $shipping_method ='local_pickup:1'; // Set the desired shipping method to hide the checkout field(s).
    global $woocommerce;
    $chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
    $chosen_shipping = $chosen_methods[0];

    if ($chosen_shipping == $shipping_method) {
    // Delete address_1 field
        unset($address_fields['address_1']);
    } else {
    // Return address_1 field
        $address_fields['city'] = array(
            'type'      => 'text',
            'label'     => __('House number and street name', 'woocommerce'),
            'required'  => true,
            'class'     => array('form-row-wide'),
            'clear'     => true
        );
    }

    return $address_fields;
}

JS：

<a href="#_" class="change-color" data-color="red">Change Color</a>

Answer 2

你的意思是基于文本的超链接？ e.g。

<a href="#_" onclick="change_color(this)">Change Color</a>

Answer 3

您可以将src保存为自定义属性data-src，并设置href="#"以避免在用户点击链接时进行导航。

<a href="#" data-src="http://javascript.ru/forum/images/smilies/victory.gif" onclick="change_color(this)">Smiley</a>

然后，您可以在点击处理程序中添加以下内容以获取图像位置，并在DOM上更新它：

obj.attributes["data-src"] && (document.body.style.backgroundImage = 'url(' + obj.attributes["data-src"].value + ')');

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
    body {
      background: no-repeat;
    }
  </style>
  <meta charset="utf-8">
  <script>
    function change_color(obj) {
      obj.value && (document.body.style.backgroundColor = obj.value);
      obj.src && (document.body.style.backgroundImage = 'url(' + obj.src + ')');
      
      obj.attributes["data-src"] && (document.body.style.backgroundImage = 'url(' + obj.attributes["data-src"].value + ')');
    }
  </script>
</head>

<body>
  <form method="post" action="1.php" onsubmit="return false">
    <button class="color" id="red" name="button" value="red" onclick='change_color(this)'>red</button>
    <button class="color" id="orange" name="button" value="orange" onclick='change_color(this)'>orange</button>
    <a  href="#" data-src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" onclick="change_color(this)">Logo</a>
    <a href="#" data-src="http://javascript.ru/forum/images/smilies/victory.gif" onclick="change_color(this)">Smiley</a>
    <img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="" onclick='change_color(this)'>
    <img src="http://javascript.ru/forum/images/smilies/victory.gif" alt="" onclick='change_color(this)'>
  </form>

</body>

</html>

JavaScript，无法使其工作

3 个答案: