每当<form>代码包含某个值时,自动添加某个类?

时间:2016-01-15 22:49:10

标签: javascript php jquery

我想为每个包含单词special的表单添加一个特殊类,作为其操作网址的一部分。

但我有很多形式,我想不出一种自动化的方法。

我想出的唯一方法是创建以下代码,但我必须使用不同的索引号为每个表单创建此类代码:

<?php
$case1 = "special"; 
$case2 = "none"; 

if($case1 == "none") { 
  $class1 = ""; // don't add any class
}
else {
  $class1 = "effect"; // add `effect` class
}

if($case2 == "none") { 
  $class2 = ""; // same goes here
}
else {
  $class2 = "effect"; // and here
}
?>

HTML:

   <form action="/go/<?= $case1 ?>" method="POST" target="_blank">
   <input type="submit" class="<?= $class1 ?> general-class" value="submit">
   </form>
   <form action="/go/<?= $case2 ?>" method="POST" target="_blank">
   <input type="submit" class="<?= $class2 ?> general-class" value="submit">
   </form>

输出:

   <form action="/go/special" method="POST" target="_blank">
   <input type="submit" class="effect general-class" value="submit">
   </form>
   <form action="/go/none" method="POST" target="_blank">
   <input type="submit" class="general-class" value="submit">
   </form>

有没有自动化的方法呢?

基本上我有两种形式,一种应该使用jquery插件打开(henace特殊类),另一种应该以正常方式打开。

我区分它们的方法是将$case[i]变量插入到动作网址中,因为这是我必须要做的事情。

也许有一种完全不同的方法来实现这一点,我不知道。

编辑:

Real Form主要是手动生成的,代码如下:

    <form action="/go/<?= $item ?>/<?php echo $case1 ; ?>" method="POST" target="_blank">
      <input name="a" type="hidden" value="<?php echo $a; ?>"/>
      <input name="b" type="hidden" value="<?php echo $b; ?>"/>
      <input name="c" type="hidden" value="<?php echo $c; ?>"/>
      <input name="d" type="hidden" value="<?php echo $d; ?>"/>
      <input type="submit" class="<?= $class1 ?> general-class" value="Click Me"></form>

(所有变量都在上面看到的PHP块的开头给出了值)

1 个答案:

答案 0 :(得分:2)

有两种方法 - PHP和jQuery。基于您的代码,我们没有足够的信息来知道我们是否可以使用PHP方式,所以这里是jQuery方式:

// wait until the document is ready
jQuery(function($) {
    // find all forms that have "special" in the action
    $('form[action*="special"]').each(
        function() {
            // within the form, find the submit button, and add the "effect" class
            $(this).find('input[type="submit"]').addClass('effect');
        }
    );
});

而且,更短/更简洁的方式:

jQuery(function($) {
    // find all forms that have "special" in the action, find their input, and add the class
    $('form[action*="special"] input[type="submit"]').addClass('effect');
});

PHP Way

所以,要在PHP中执行此操作,我建议编写一个简单的函数,然后调用它。

function get_class( $slug ) {
    $class_map = array(
        'special' => 'effect',
        'none'    => '',
        // .. you could add others here if appropriate

    return ( isset( $class_map[ $slug ] ) ) ? $class_map[ $slug ] : '';
);

然后你就可以在你的php中使用它了:

<form action="/go/<?= $item ?>/<?php echo $case1 ; ?>" method="POST" target="_blank">
  <input name="a" type="hidden" value="<?php echo $a; ?>"/>
  <input name="b" type="hidden" value="<?php echo $b; ?>"/>
  <input name="c" type="hidden" value="<?php echo $c; ?>"/>
  <input name="d" type="hidden" value="<?php echo $d; ?>"/>
  <input type="submit" class="<?= get_class( $case1 ); ?> general-class" value="Click Me"></form>

虽然这可能看起来不是很重要,但如果您开始将这些概念应用于您的代码,您很快就会看到值开始加起来。