Question

我必须使用＆＃34; Some Text＆＃34;设置span标记。每当前一个输入标签的值为零时，InnerHTML为红色。例如：首先是以下示例HTML代码＆＃34; Some Text＆＃34; span标签应为红色。

<td data-colid="some id1" >
    <div>
        <div>
            <span data-varname="somename">$0.00</span>
            <input value="$0.0"/>
        </div>
    </div>
</td>
<td>
    <span>Some Text</span>
</td>
<td data-colid="some id2" >
        <div>
            <div>
                <span data-varname="somename">$10.00</span>
                <input value="$10.0"/>
            </div>
        </div>
    </td>
<td>
    <span>Some Text</span>
</td>

这些是唯一可用于工作的id，没有其他类或java脚本可用。请帮我一些指示。

Answer 1

使用jquery尝试：

以“Some Text”作为条件

$('td span:contains("Some Text")').css('color','black');
$('td input[value="$0.0"]').each(function(){
    $(this).closest('td').next().find('span:contains("Some Text")').css('color','red');
})

没有文字条件

$('td input').each(function(){
    $(this).closest('td').next().find('span').css('color','black');
})
$('td input[value="$0.0"]').each(function(){
    $(this).closest('td').next().find('span').css('color','red');
})

Answer 2

我没有使用您的代码，因为尝试跟踪这么多div是一件令人头疼的问题。这是一个简单的HTML布局和复杂的CSS，没有JS / jQ。如果你像我的演示一样改变你的布局，它不仅会很好用，而且还具有可读性和语义性。 ; - ）

这是一个自定义复选框，我已将其制作成半永久性标记，以标记您所需的条件（即$ 0.0 =红色文字）。这是一个很少见的CSS实际上做过去只用脚本做过的事情。如果你需要以编程方式控制它，请告诉我，我会把一些JS放进去。

顺便说一句，我知道＆＃34;生产＆＃34; 受到HTML和JS等新技术的恐吓，所以你不必重申。 CodeSir和Harry是正确的，因为你或＆＃34;制作＆＃34; 必须更灵活，加入21 ^st世纪并使用HTML和JS。

＆＃13;

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>34923541</title>
  <style>
    html,
    body {
      box-sizing: border-box;
      background: #222;
      color: #eee;
      font: 400 16px/1.4'Verdana';
      height: 100vh;
      width: 100vw;
    }
    *,
    *:before,
    *:after {
      box-sizing: inherit;
      margin: 0;
      padding: 0;
    }
    fieldset {
      margin: 0 1em 1em 0;
      padding: 8px;
      border-radius: 9px;
      border: 3px double #FF8;
      width: 100%;
      max-width: 19em;
    }
    legend {
      font: small-caps 700 1.5rem/2"Palatino Linotype";
      color: #FD1;
    }
    /* Demo #1 */
    input.fade {
      display: none;
    }
    input.fade + label {
      color: #DDD;
      font-size: 16px;
    }
    input.fade + label span {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin: -1px 4px 0 0;
      vertical-align: baseline;
      cursor: pointer;
      background: #555;
      line-height: 100%;
    }
    input.fade:checked + label span:after {
      content: 'X';
      color: #F00;
      font-family: cursive;
      font-style: oblique;
      font-weight: 900;
    }
    input.fade + label span:after {
      content: '';
      color: #F00;
      font-family: cursive;
      font-style: oblique;
      font-weight: 900;
    }
    input.fade + label + output:before {
      content: '$10.00';
      color: #Fc0;
      font-family: 'Raleway';
      font-style: normal;
      font-weight: 900;
    }
    input.fade:checked + label + output:before {
      content: '$0.00';
      color: red;
      font-family: cursive;
      font-style: oblique;
      font-weight: 900;
    }
    input.fade + label + output:after {
      content: 'Available';
      color: #Fc0;
      font-family: `Raleway`;
      font-style: normal;
      font-weight: 900;
    }
    input.fade:checked + label + output:after {
      content: 'Sold Out';
      color: red;
      font-family: cursive;
      font-style: oblique;
      font-weight: 900;
    }
    input.fade + label span,
    input.fade:checked + label span {
      -webkit-transition: background 0.4s linear;
      -moz-transition: background 0.4s linear;
      transition: background 0.4s linear;
    }
  </style>
</head>

<body>
  <fieldset>
    <legend>Demo #1</legend>
    <input type='checkbox' name='chk1' id="chk1" class="fade" value='2' />
    <label for="chk1"><span></span> 
    </label>
    <output id="out1" for="chk1"><span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </output>
  </fieldset>
</body>

</html>

＆＃13;

使用纯css

2 个答案: