Question

我有兴趣根据点击的内容更改toggleClass。

我希望课程依赖于页面上的上一次点击。

所以如果我点击Letter＆＃34; A＆＃34; - 在这种情况下，它将使方形红色。点击广场后，我希望.toggleClass为.darkred

当我点击Letter＆＃34; B＆＃34; - 我希望.toggleClass是.darkblue

如何使其动态化，以便知道要添加到toggleClass的哪个类

<script>
$("li.alpha").click(function(){
    $(".color").addClass("red").removeClass("blue").removeClass("orange");
});
$("li.bravo").click(function(){
    $(".color").addClass("blue").removeClass("red").removeClass("orange");
});
$("li.charlie").click(function(){
    $(".color").addClass("orange").removeClass("blue").removeClass("red");
});
</script>
<script>
    $(".color").on("mousedown mouseup", function(e)
{
    $(".color").toggleClass("darkblue");  // I want this class to be dynamic. It should be based on what I clicked on. so in this case I would have clicked on li.bravo
});
</script>

我希望.toggleClass中添加的类是动态的，并且基于我要添加的类。

red = .darkred

blue = .darkblue

orange = .darkorange。

https://jsfiddle.net/hp6e0w3z/

Answer 1

试试这个。

public static function getInstance($type, $prefix = 'JTable', $config = array())
{
    // Sanitize and prepare the table class name.
    $type       = preg_replace('/[^A-Z0-9_\.-]/i', '', $type);
    $tableClass = $prefix . ucfirst($type);

    // Only try to load the class if it doesn't already exist.
    if (!class_exists($tableClass))
    {
        // Search for the class file in the JTable include paths.
        jimport('joomla.filesystem.path');

        $paths = self::addIncludePath();
        $pathIndex = 0;

        while (!class_exists($tableClass) && $pathIndex < count($paths))
        {
            if ($tryThis = JPath::find($paths[$pathIndex++], strtolower($type) . '.php'))
            {
                // Import the class file.
                include_once $tryThis;
            }
        }

        if (!class_exists($tableClass))
        {
            // If we were unable to find the class file in the JTable include paths, raise a warning and return false.
            JLog::add(JText::sprintf('JLIB_DATABASE_ERROR_NOT_SUPPORTED_FILE_NOT_FOUND', $type), JLog::WARNING, 'jerror');

            return false;
        }
    }

    // If a database object was passed in the configuration array use it, otherwise get the global one from JFactory.
    $db = isset($config['dbo']) ? $config['dbo'] : JFactory::getDbo();

    // Instantiate a new table class and return it.
    return new $tableClass($db);
}

我还建议使用<script> $("li.alpha").click(function(){ $(".color").addClass("red").removeClass("blue").removeClass("orange"); }); $("li.bravo").click(function(){ $(".color").addClass("blue").removeClass("red").removeClass("orange"); }); $("li.charlie").click(function(){ $(".color").addClass("orange").removeClass("blue").removeClass("red"); }); $(".color").click(function(e) { var color = $(this).className; $(".color").toggleClass('dark' + color); }); </script>删除所有其他类。

className

<script> $("li.alpha").click(function(){ $(".color").get(0).className = ''; $(".color").addClass("red"); }); $("li.bravo").click(function(){ $(".color").get(0).className = ''; $(".color").addClass("blue"); }); $("li.charlie").click(function(){ $(".color").get(0).className = ''; $(".color").addClass("orange"); }); $(".color").click(function(e) { var color = $(this).className; $(".color").toggleClass('dark' + color); }); </script>这将删除元素中的所有类。

使代码更短

$(".color").get(0).className = '';

Answer 2

您可以检查现有的颜色类名，并根据它来应用新的类名。

$(".color").on("mousedown mouseup", function(e)
{
  var ele = $(e.target),
  colors = ['blue','red','orange'],
  len = colors.length,
  color='';

  while(len--){ //Cycle through existing classes until a match hits.
    if(ele.hasClass(colors[len])){
      color = 'dark' + colors[len];
      break;
    }
  }
  $(".color").toggleClass(color);
});

使用以上示例更新了小提琴：https://jsfiddle.net/hp6e0w3z/3/

Answer 3

基于你的小提琴。这是我处理它的方式：https://jsfiddle.net/hp6e0w3z/1/

添加数据属性以保存要更改它的颜色。

<ul>
    <a href="#"> <li class="alpha" data-color="red">A</li> </a>
    <a href="#"> <li class="bravo" data-color="blue">B</li> </a>
    <a href="#"> <li class="charlie" data-color="orange">C</li> </a>
<ul>
    <div class="color"> </div>

然后在你的javascript中，在li上点击从数据属性中获取颜色并将其设置为全局变量。删除颜色div上之前设置的所有类，然后重新添加颜色类。（虽然我将ID =＆＃39; color＆＃39;因此您不必担心删除颜色类别）。然后添加您的颜色类。

var color; 
$("li").click(function(){
    color = $(this).data('color');
    $(".color").removeClass().addClass('color').addClass(color);
});

$(".color").on("mousedown mouseup", function(e)
{
    $(".color").toggleClass("dark" + color);
});

Answer 4

你很亲密。

$("li.alpha").click(function(){
   $(".color").addClass("red").removeClass("blue").removeClass("orange");
   handleSelected(this, 'red');
});
$("li.bravo").click(function(){
   $(".color").addClass("blue").removeClass("red").removeClass("orange");
   handleSelected(this, 'blue');
});
$("li.charlie").click(function(){
  $(".color").addClass("orange").removeClass("blue").removeClass("red");
  handleSelected(this, 'orange');
});

function handleSelected(li, color) {
  $('.selected').removeClass('selected');
  $('.selected').attr('color','');
  $(li).addClass('selected');
  $(li).attr('color', color);
}

$(".color").on("mousedown mouseup", function(e) {
  var str = $('.selected').attr('color');
  str = 'dark' + str.replace('selected','').trim();

  $(".color").toggleClass(str);
});

您基本上将“选定”类分配给单击的LI，并使用您想要的颜色向该LI添加自定义属性。这都是在handleSelection（）函数中完成的。

单击（DIV class ='color'）时，您将获取所选LI标签的自定义属性颜色，并在其前面加上“dark”，然后切换！

希望有所帮助！

toggleClass基于Click Function

4 个答案: